Drehen Uhrzeiger mit Vanille js

Question

<div class="clock"> 
<div class="space"> 
<div class="hourhand"></div> 
<div class="minutehand"></div> 
<div class="sechand" id="secc"></div> 
</div> 
</div> 

---

function date(){ 
    var d = new Date(); 
    const sec= d.getSeconds(); 
    var x = document.getElementById('secc'); 
    x.style.transform="rotate(sec)"; 
    console.log(sec); 
} 
setInterval(date, 1000); 

Ich mache diese einfache Uhr Vanille js verwenden. (Ich habe nicht den CSS-Code dargestellt). Die Zeile im Skript-Tag - x.style.transform nimmt sec nicht als Eingabe? Wie sollte ich dann den Wert sec an diesen übergeben, damit er sich dreht?

Answer 1

Zuerst, wenn Sie css transofrm-rotate verwenden, müssen Sie eine unit (rad/deg/turns) angeben.

Die zweite Sache ist, Ihr Javascript-Objekt nicht magicly themselfs in gültige CSS-Werte drehen, müssen Sie die CSS-Werte wie folgt erstellen:

x.style.transform="rotate(" + (6 * sec) + "deg)"; 

Beachten Sie die 6*sec, weil wir wollen, jeweils um 360 Grad haben drehen (von 60 in jeder Sekunde).

Answer 2

Rotate Syntax:

transform: rotateZ(90deg) 

Diese eine Drehung um 90 Grad in der Z-Ebene verursachen würde, aber in Ihrem Fall, dass Sie eine Variable, die Sie in übergeben müssen, damit Sie Ihre Sekunden konvertieren müssen. zu Grad.

1. Summe von Sekundenzeiger in einer Minute = 360 Grad
2. Sekunden in einer Minute aufgespannten Grad = 60s

3. Degrees in 1 Sekunde = (360 Grad/60 Sekunden) = 6 Grad spannte

   transform: rotateZ(`${sec * 6}deg`) 
   

Für Ihr Code:

x.style.transform=`rotateZ(${sec * 6}deg)`; 

Answer 3

Die CSS transform property wird verwendet, um viele verschiedene Transformationen zu steuern, die Sie suchen, ist rotate.

Rotationen werden in entweder deg angegeben (Grad, 0-360), rad (Radiant, 0-2 * π) oder turn (0-1)

ich für die turn in diesem Fall gehen würde, wie die Berechnung der Rotation sehr geradlinig ist: now/max (zB drei Uhr am Nachmittag: 15/24)

Einfaches Beispiel:

(Anmerkung ich habe nicht zu viel mit Ausrichtung der Griffe gestört)

setInterval(function() { 
 
    var date = new Date(), 
 
     positions = [ 
 
     date.getHours()/24, 
 
     date.getMinutes()/60, 
 
     date.getSeconds()/60 
 
     ], 
 
     clock = document.querySelector('.clock'); 
 

 
    positions.forEach(function(rotation, index) { 
 
    clock.children[index].style.transform = 'rotate(' + rotation + 'turn)'; 
 
    }); 
 

 
}, 1000);

.clock { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 1px solid gold; 
 
} 
 

 
.clock > * { 
 
    position: absolute; 
 
    bottom: 50%; 
 
    left: 50%; 
 
    height: 50%; 
 
    margin-left: -1px; 
 
    border: 2px solid #000; 
 
    transform-origin: bottom; 
 
} 
 

 
.hourhand { 
 
    height: 30%; 
 
} 
 

 
.sechand { 
 
    border-color: #f00; 
 
}

<div class="clock"> 
 
    <div class="hourhand"></div> 
 
    <div class="minutehand"></div> 
 
    <div class="sechand"></div> 
 
</div>

Wenn Sie eine Rolex-Effekt möchten (was nicht pro Sekunde nicht ankreuzen), können Sie das Intervall sehr kurz eingestellt (z 20 ms) und berechnet die zweite Umdrehung basierend auf getTime statt getSeconds (getTime liefert die Anzahl von Millisekunden seit der "Unix Epoch" (1970-01-01 00:00:00.000), z.B.:

date.getTime()/60000