css3+js繪制動(dòng)態(tài)時(shí)鐘的示例代碼-創(chuàng)新互聯(lián)

變量名是隨便起的,不要介意; class=center的這個(gè)div是表中心那個(gè)小黑點(diǎn).

時(shí)針是60*60*60s轉(zhuǎn)一圈, 分針是60*60s轉(zhuǎn)一圈, 秒針是60s轉(zhuǎn)一圈, 所以css代碼如下：

.dial{
    width:600px;
    height:600px;
    margin:0 auto;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(153,50,204,0.2);
    background-image: url(img/表盤.jpg);
    background-size: 100% 100%;
}
.bigdiv{
    width:600px;
    height:600px;
    margin:0 auto;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.bigdiv>div{
    position: absolute;
    left:298px;
    border-radius: 100px;
}
.bigdiv1{
    animation: moves 60s steps(60) infinite;
}
.bigdiv1 .secondHand{
    width:4px;
    height:250px;
    background-color: red;
    top:50px;
    left:298px;
}
.bigdiv2{
    animation: moves 3600s steps(3600) infinite;
}
.bigdiv2 .minuteHand{
    width:6px;
    height:180px;
    background-color: green;
    top:120px;
    left:297px;
}
.bigdiv3{
    animation: moves 216000s steps(216000) infinite;
}
.bigdiv3 .hourHand{
    width:8px;
    height:160px;
    background-color: orange;
    top:140px;
    left:296px;
    border-radius: 100px;
}
.bigdiv .center{
    top:290px;
    left:290px;
    width:20px;
    height:20px;
    background-color: black;
    z-index: 2;
}
@keyframes moves{
    from{ transform: rotateZ(0deg); }
    to{ transform: rotateZ(360deg); }
}

這一步做完后效果圖是這個(gè)樣子的:

然后用js計(jì)算當(dāng)前時(shí)間,

var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

然后計(jì)算當(dāng)前每個(gè)針的旋轉(zhuǎn)角度

var secondAngle = seconds;
var minuteAngle = minutes * 60 + seconds;
var hourAngle = (60/12) * ((hours%12) * 3600 + minuteAngle);

現(xiàn)在的思路就是:每個(gè)針會(huì)按照自己定的時(shí)間轉(zhuǎn)一圈,初始角度也能知道,怎么組成一個(gè)顯示當(dāng)前時(shí)間的動(dòng)態(tài)鐘表呢?

剛開始的想法是讓這3層div旋轉(zhuǎn)對應(yīng)的角度,然后再開始,后來一想不行,因?yàn)樗€是固定的時(shí)間旋轉(zhuǎn)一周,指針指向會(huì)有偏差,

現(xiàn)在需要的是頁面進(jìn)來的第一圈旋轉(zhuǎn)固定角度,其余的按照原來固定的時(shí)間旋轉(zhuǎn)一周就行了,

css3里面有一個(gè)animation-delay屬性,它表示的意思是動(dòng)畫延遲,負(fù)數(shù)就表示提前開始(比如-5s就表示動(dòng)畫從第5s的時(shí)間開始),

剛好可以用到,讓這幾個(gè)指針提前開始對應(yīng)的角度.

js代碼如下：

hourHand.style.cssText = "animation-delay: -"+ hourAngle +"s";
minuteHand.style.cssText = "animation-delay: -"+ minuteAngle +"s";
secondHand.style.cssText = "animation-delay: -"+ secondAngle +"s";

最后自己再加了個(gè)動(dòng)態(tài)時(shí)間在鐘表的上面展示

完整代碼：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3+js繪制動(dòng)態(tài)時(shí)鐘的示例代碼”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。