var secondhand = document.queryselector('.second-hand'); var minutehand = document.queryselector('.min-hand'); var hourhand = document.queryselector('.hour-hand'); function setdate(){ var = new date(); var seconds = ((now.getseconds() * 6 + 90) % 360); var minutes = ((now.getminutes() * 6 + 90) % 360) ; var hour = ((now.gethours() * 30 + 90) % 360) ; secondhand.style.transform=`rotate(${seconds}deg)`; minutehand.style.transform=`rotate(${minutes}deg)`; hourhand.style.transform=`rotate(${hour}deg)`; } setinterval(setdate,1000); setdate();html { background:#018ded url(http://unsplash.it/1500/1000?image=881&blur=50); background-size:cover; font-family:'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display:flex; flex:1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; padding:2rem; border-radius:50%; margin:50px auto; position: relative; box-shadow: 0 0 0 4px rgba(0,0,0,0.1), inset 0 0 0 10px #efefef, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); } .clock-face { position: relative; width: 100%; height: 100%; transform: translatey(-3px); /* account height of clock hands */ } .hand { width:50%; height:6px; background:black; position: absolute; top:50%; transform-origin:100%; transform:rotate(90deg); transition:all .05s; transition-timing-function:cubic-bezier(.1,2.7,.58,1); } .second-hand{ background-color:red; } .hour-hand{ width:35%; left:15%; }<body> <div class="clock"> <div class="clock-face"> <div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="hand second-hand"></div> </div> </div> </body>i'm doing wesbox javascript 30 , trying change length of hour hand (to make little shorter) still have rotate around center of clock. tried number of things resetting width , top nothing seems work. here's link fiddle: clock
<div class="clock"> <div class="clock-face"> <div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="hand second-hand"></div> </div> </div> css
html { background:#018ded url(http://unsplash.it/1500/1000?image=881&blur=50); background-size:cover; font-family:'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display:flex; flex:1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; padding:2rem; border-radius:50%; margin:50px auto; position: relative; box-shadow: 0 0 0 4px rgba(0,0,0,0.1), inset 0 0 0 10px #efefef, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); } .clock-face { position: relative; width: 100%; height: 100%; transform: translatey(-3px); /* account height of clock hands */ } .hand { width:50%; height:6px; background:black; position: absolute; top:50%; transform-origin:100%; transform:rotate(120deg); transition:all .05s; transition-timing-function:cubic-bezier(.1,2.7,.58,1); } .second-hand{ background-color:red; } .hour-hand{ width:50%; transform-origin:100%; }
you need adjust position of hour-hand using:
.hour-hand{ width: 30%; left: 20%; } see example below
var secondhand = document.queryselector('.second-hand'); var minutehand = document.queryselector('.min-hand'); var hourhand = document.queryselector('.hour-hand'); function setdate(){ var = new date(); var seconds = ((now.getseconds() * 6 + 90) % 360); var minutes = ((now.getminutes() * 6 + 90 +30) % 360) ; var hour = ((now.gethours() * 30 + 180) % 360) ; secondhand.style.transform=`rotate(${seconds}deg)`; minutehand.style.transform=`rotate(${minutes}deg)`; hourhand.style.transform=`rotate(${hour}deg)`; } setinterval(setdate,1000); setdate();html { background:#018ded url(http://unsplash.it/1500/1000?image=881&blur=50); background-size:cover; font-family:'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display:flex; flex:1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; padding:2rem; border-radius:50%; margin:50px auto; position: relative; box-shadow: 0 0 0 4px rgba(0,0,0,0.1), inset 0 0 0 10px #efefef, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); } .clock-face { position: relative; width: 100%; height: 100%; transform: translatey(-3px); /* account height of clock hands */ } .hand { width:50%; height:6px; background:black; position: absolute; top:50%; transform-origin:100%; transform:rotate(90deg); transition:all .05s; transition-timing-function:cubic-bezier(.1,2.7,.58,1); } .second-hand{ background-color:red; } .hour-hand{ width: 30%; left: 20%; }<body> <div class="clock"> <div class="clock-face"> <div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="hand second-hand"></div> </div> </div> </body>
Comments
Post a Comment