今天我們來學(xué)習(xí)一下如何使用js和css3制作時鐘。

首先，我們要創(chuàng)建一個html結(jié)構(gòu)，包含一個容器和時鐘的三個針：

<div id="clock">
<div id="hour-hand"></div>
<div id="minute-hand"></div>
<div id="second-hand"></div>
</div>

接著，使用css3對針進(jìn)行樣式設(shè)置：

#clock {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border: 2px solid black;
border-radius: 50%;
}
#hour-hand, #minute-hand, #second-hand {
position: absolute;
width: 2px;
height: 50px;
background-color: black;
transform-origin: bottom center;
}
#hour-hand {
height: 40px;
}
#minute-hand {
height: 45px;
}
#second-hand {
height: 50px;
background-color: red;
}

我們設(shè)置了一個大小為200x200的圓形容器，并對三個針分別設(shè)置了不同的高度和顏色。

最后，使用js來獲取當(dāng)前時間，并改變針的角度，實現(xiàn)時鐘運(yùn)作：

function setClock() {
var hourHand = document.getElementById('hour-hand');
var minuteHand = document.getElementById('minute-hand');
var secondHand = document.getElementById('second-hand');
var now = new Date();
var hour = now.getHours() % 12;
var minute = now.getMinutes();
var second = now.getSeconds();
var hourAngle = (hour * 30) + (0.5 * minute);
var minuteAngle = minute * 6;
var secondAngle = second * 6;
hourHand.style.transform = 'rotate(' + hourAngle + 'deg)';
minuteHand.style.transform = 'rotate(' + minuteAngle + 'deg)';
secondHand.style.transform = 'rotate(' + secondAngle + 'deg)';
}
setInterval(setClock, 1000);

我們使用setInterval函數(shù)每隔1秒調(diào)用一次setClock函數(shù)，每次改變針的角度來達(dá)到時鐘轉(zhuǎn)動的效果。

這樣，我們就成功地制作了一個使用js和css3制作的時鐘。