簡易時鐘動畫

時間 2019-11-06

標籤簡易時鐘動畫简体版

原文原文鏈接

這就是我說的簡易的錶盤，有點簡陋了 QaQ
css

剛學習的時鐘動畫，以爲還有不少東西要去學習，有時候發現代碼真是很神奇的。
首先呢咱們須要有一個圓的輪廓，這個就是定義一個div寬和高相同，而後用到了一個css3的屬性 border-radius：50% 50% 固然只要是大於等於50%都是能夠成圓的。
輪廓作出來後咱們須要插入60個錶盤上的刻度。這個時候有兩種辦法 html

1.能夠用dom進行插入css3

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

2.能夠用html結構插入app

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

錶盤刻度插入之後呢咱們須要對這60個刻度進行定位寫出旋轉的原點而後每一個刻度都在上一個刻度的基礎上多旋轉6° 咱們須要寫出錶針用三個div分別表示時針分針秒針而且這三個須要在一個點上進行旋轉那就是三個div的底部dom

而後咱們應該知道如今所處的時間是多少這是咱們須要用到js了。
建立一個Date的對象而且用三個變量分別表示小時分鐘秒並存放到一個函數中。函數

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

當獲得時間之後獲得這三個dom對象學習

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

當獲得這三個dom對象時須要進行轉動用到transform：rotate（度數）動畫

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

最後封裝好的函數run的代碼以下：
function run() {spa

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)";

這樣只能轉動一次咱們須要開一個定時器把run這個函數放進去code

setInterval(run,1000);

html代碼：

<div id="clock">
    <ul id="dial"></ul>
    <div id="second"></div>
    <div id="minute"></div>
    <div id="hour"></div>
</div>

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;
        }

所有代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body>
    <div id="clock">
        <ul id="dial"></ul>
        <div id="second"></div>
        <div id="minute"></div>
        <div id="hour"></div>
    </div>
    <script>
        var oClock=document.getElementById("clock");
        var oDial=document.getElementById("dial");
        var oSecond=document.getElementById("second");
        var oMinute=document.getElementById("minute");
        var oHour=document.getElementById("hour");
        var Lis="";
        for(var i=0;i<60;i++) {
//            var oLi=document.createElement("li");
//            oDial.appendChild(oLi);
            Lis+="<li style='transform: rotate("+ i * 6+"deg)'></li>";
        }
        oDial.innerHTML=Lis;
        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)";
        }
        run();
        setInterval(run,1000);
    </script>
</body>
</html>

寫的很差還望各位指出錯誤共同進步。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。