旋轉時鐘指針使用香草JS

<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這個值來使它旋轉？旋轉時鐘指針使用香草JS

來源

2017-02-25 sugandh goyal

首先，當您使用css transofrm-rotate時，您需要指定unit（rad/deg/turns）。

第二件事情是，你的JavaScript對象不magicly轉themselfs成有效的CSS值，你需要建立這樣的CSS值：

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

通知的6*sec因爲我們希望讓每一個360度轉（從每秒60轉）。

來源

2017-02-25 13:02:04

>爲什麼我們乘以6？ –

由於要完整轉動，我們需要360度的秒數，所以360/60 = 6。使用'rad' /'turn'單位也可以做到這一點。 –

Rotate語法：

transform: rotateZ(90deg)

這將在Z平面內引起旋轉90度，但在你的情況你有你需要傳遞一個變量所以，你需要你的秒轉換。度。

通過秒針在一分鐘= 360度

秒在一分鐘內跨越

總計度= 60
度跨越1秒=（360度/ 60秒）= 6度
```
transform: rotateZ(`${sec * 6}deg`) 
```

爲您的代碼：

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

來源

2017-02-25 13:05:32

這是什麼語法，我不明白這一點？但我已經看過很多次了。 –

@sugandhgoyal這只是將表達式/變量轉換爲其字符串等效的ES6方式。在這裏，它將'sec'乘以'6'，'$ {}'將其轉換爲一個字符串，並將其連接成deg。 '''''''也可以帶多行字符串。 –

CSS transform property用於控制很多不同的轉換，您正在尋找的轉換是rotate。

旋轉是在任一指定deg（度，0-360），rad（弧度，0-2 *π）或turn（0-1）

我會去的turn在這種情況下，隨着旋轉的計算是非常簡單的：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>

如果希望更勞力士效應（其不每秒打勾），可以設定的時間間隔非常短（例如20ms），並基於getTime而不是getSeconds（getTime提供自「Unix Epoch」（1970-01-01 00:00:00.000）（例如，0））以來的毫秒數來計算二手旋轉。：

date.getTime()/60000

來源

2017-02-25 14:17:35

旋轉時鐘指針使用香草JS

回答

相關問題