回して時計の針使用してバニラ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); 

私はバニラのJSを使用して、このシンプルな時計を作っています。（私はCSSコードを示していません）。 スクリプト内の行 - x.style.transformは入力としてsecを使用していませんか？ 次に、回転させるためにsecの値をこれに渡す必要がありますか？

Answer 1

まず、transofrm-rotateを使用する場合、unit（rad/deg/turns）を指定する必要があります。

第二のものは、あなたのjavascriptオブジェクトがmagicly有効なCSS値にthemselfsをオンにしないで、あなたはこのようにCSSの値を構築する必要があります：

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

お知らせ6*sec我々は360度ずつを持っていると思いますので、回す（毎秒60から）。

Answer 2

Rotate構文：

transform: rotateZ(90deg) 

これは、Z平面で90度回転させるだろう、しかし、あなたのケースでは、あなたはあなたが合格する必要がある変数を持っているので、あなたの秒に変換する必要があります。度まで

1. 合計分= 360度で1分間に
2. 秒で秒針によって張ら度= 60秒は

3. 度は1秒（= 360度/ 60秒）= 6度

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

   にまたがりますあなたのコードの場合

：

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

Answer 3

CSS transform propertyは、多くの異なる変換を制御するために使用されます。探しているのはrotateです。

回転はrad（ラジアン、0-2 *π）またはturn（0-1）

は、私はこのケースでturnのために行くだろう、deg（度、0から360）のいずれかで指定されています回転の計算は非常に単純であるよう：

簡単な例：now/max（15/24午後例えば三時）：

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>

（ノートでは、私はハンドルを合わせるとあまり気にしていません）

あなたは（毎秒ダニはありません）ロレックス効果の多くをたい場合は、例えば（非常に短い間隔を設定することができますgetSecondsではなくgetTimeに基づいて間接回転を計算します（getTimeは、 "Unix Epoch"（1970-01-01 00:00:00.000）からのミリ秒数を提供します。：

date.getTime()/60000