簡(jiǎn)易時(shí)鐘動(dòng)畫(huà)

suosuopuo 發(fā)布于2019-08-29 13:05 / 1659人閱讀

摘要：創(chuàng)建一個(gè)的對(duì)象并且用三個(gè)變量分別表示小時(shí)分鐘秒并存放到一個(gè)函數(shù)中。

這就是我說(shuō)的簡(jiǎn)易的表盤(pán)，有點(diǎn)簡(jiǎn)陋了 QaQ

剛學(xué)習(xí)的時(shí)鐘動(dòng)畫(huà)，覺(jué)得還有很多東西要去學(xué)習(xí)，有時(shí)候發(fā)現(xiàn)代碼真是很神奇的。
首先呢我們需要有一個(gè)圓的輪廓，這個(gè)就是定義一個(gè)div寬和高相同，然后用到了一個(gè)css3的屬性 border-radius：50% 50% 當(dāng)然只要是大于等于50%都是可以成圓的。
輪廓做出來(lái)后我們需要插入60個(gè)表盤(pán)上的刻度。這個(gè)時(shí)候有兩種辦法

1.可以用dom進(jìn)行插入

var oDial=document.getElementById("dial");
    for(var i=0;i<60;i++) {
        var oLi=document.createElement("li");
        oDial.appendChild(oLi);
        
    }

2.可以用html結(jié)構(gòu)插入

   var Lis="";
    for(var i=0;i<60;i++) {
        Lis+="";
    }
    oDial.innerHTML=Lis;

表盤(pán)刻度插入以后呢我們需要對(duì)這60個(gè)刻度進(jìn)行定位寫(xiě)出旋轉(zhuǎn)的原點(diǎn)然后每個(gè)刻度都在上一個(gè)刻度的基礎(chǔ)上多旋轉(zhuǎn)6° 我們需要寫(xiě)出表針用三個(gè)div分別表示時(shí)針分針秒針并且這三個(gè)需要在一個(gè)點(diǎn)上進(jìn)行旋轉(zhuǎn) 那就是三個(gè)div的底部

然后我們應(yīng)該知道現(xiàn)在所處的時(shí)間是多少這是我們需要用到j(luò)s了。
創(chuàng)建一個(gè)Date的對(duì)象并且用三個(gè)變量分別表示小時(shí) 分鐘秒并存放到一個(gè)函數(shù)中。

        var now=new Date();
        var hour=now.getHours();
        var second=now.getSeconds();
        var minute=now.getMinutes();

當(dāng)?shù)玫綍r(shí)間以后得到這三個(gè)dom對(duì)象

    var oSecond=document.getElementById("second");
    var oMinute=document.getElementById("minute");
    var oHour=document.getElementById("hour");

當(dāng)?shù)玫竭@三個(gè)dom對(duì)象時(shí)需要進(jìn)行轉(zhuǎn)動(dòng)用到transform：rotate（度數(shù)）

        oSecond.style.transform="rotate("+ second * 6+"deg)";
        oMinute.style.transform="rotate("+ minute*6 +"deg)";
        oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

最后封裝好的函數(shù)run的代碼如下：
function run() {

        var now=new Date();
        var hour=now.getHours();
        var second=now.getSeconds();
        var minute=now.getMinutes();
        oSecond.style.transform="rotate("+ second * 6+"deg)";
        oMinute.style.transform="rotate("+ minute*6 +"deg)";
        oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

這樣只能轉(zhuǎn)動(dòng)一次我們需要開(kāi)一個(gè)定時(shí)器把run這個(gè)函數(shù)放進(jìn)去

setInterval(run,1000);

html代碼：

css代碼

 * {
            padding: 0;
            margin: 0;
        }
        #clock {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid ;
            margin: 200px auto;
            position: relative;
        }
        li {
            list-style: none;
            width: 2px;
            height: 6px;
            background: black;
            position: absolute;
            left: 100px;
            top: 0;
            transform-origin: 0 100px;
        }
        #dial li:nth-child(5n+1) {
            height: 10px;
        }
        #clock div {
            transform-origin: bottom;
        }
        #hour{
            width: 4px;
            height: 40px;
            background: #000000;
            position: absolute;
            left: 98px;
            top: 60px;
        }
        #minute{
            width: 4px;
            height: 60px;
            background: #999;
            position: absolute;
            left: 98px;
            top: 40px;
        }
        #second{
            width: 2px;
            height: 70px;
            background: #ff0000;
            position: absolute;
            left: 99px;
            top: 30px;
        }

全部代碼: