js中時鐘錶盤

時間 2019-11-12

原文原文鏈接

1.js時鐘錶盤

代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .clock{
                width: 600px;
                height: 600px;
                margin: 50px auto;
                background: url(./images/clock.jpg) no-repeat;
                position: relative;
            }
            .clock div{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .h{
                background: url(./images/hour.png) no-repeat center center;
            }
            .m{
                background: url(./images/minute.png) no-repeat center center;

            }
            .s{
                background: url(./images/second.png) no-repeat center center;

            }
        </style>
    </head>
    <body>
        <div class="clock">
            <div class="h" id="hour"></div>
            <div class="m" id="minute"></div>
            <div class="s" id="second"></div>
        </div>
    </body>
    <script>
        function $(id)
        {
            return document.getElementById(id);
        }
        var hour = $('hour');
        var minute = $('minute');
        var second = $('second');
        // var date = new Date();
        // console.log(date);
        // console.log(hour);
        //開始定時
        var s =0,m=0,h=0,ms=0;
        setInterval(function(){
            //內容處理開始
            var date = new Date();//獲取時間
            ms = date.getMilliseconds(); //如今的毫秒數
            s = date.getSeconds() + ms/1000; 
            m = date.getMinutes() + s / 60; 
            h = date.getHours() % 12 + m /60;
            // document.write(parseInt(h) +":"+parseInt(m ) +":"+parseInt(s) );

            //旋轉角度
            //一圈 360度 一共60秒  一秒是 6度
            second.style.WebkitTransform = "rotate("+s*6 + "deg)";
            minute.style.WebkitTransform = "rotate(" + m*6 + "deg)";
            hour.style.WebkitTransform = "rotate(" + h*30 + "deg)";
            
        },100);
    </script>
</html>

View Code

2.在線預覽html

相關標籤/搜索

每日一句

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