JS用定时器制作时钟

制作思路
1.首先需要时钟的背景图片，时针图片，分针图片，秒针图片。钟背景图片固定（相对定位），时/分/秒针图片旋转（绝对定位）；
2.设置定时器；
3.获取系统时间，时/分/秒/毫秒；
4.秒针图片每秒旋转6°，分针每分针旋转6°，时针每小时旋转30°。
时钟背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #clock {
            position: relative;
        }
        #clock img{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="clock">
        <img src="img/clock.png" height="125" width="125"/>//时钟4张图片宽高一致，且宽等于高；
        <img src="img/h.png" height="125" width="125"/>
        <img src="img/m.png" height="125" width="125"/>
        <img src="img/s.png" height="125" width="125"/>
    </div>
    <script type="text/javascript">
        var imgs = document.getElementsByTagName("img");
         	//设置定时器
           setInterval(function () {
            // 3. 获取数据
            var $d = new Date();
            var h = $d.getHours();// 获取系统小时
            var m = $d.getMinutes();//获取系统分
            var s = $d.getSeconds();//获取系统秒
            var ms = $d.getMilliseconds();//获取系统毫秒

            // 4. 逻辑计算
            var _h = h+m/60;//如1点30分，即1.5小时，时针应旋转45°，位于1点和2点的正中间；
            var _m = m+s/60;
            var _s = s+ms/1000;
            
            // 5. 应用数据
            imgs[1].style.transform = "rotate("+(_h*30)+"deg)";//时针每小时旋转30°
            imgs[2].style.transform = "rotate("+(_m*6)+"deg)";
            imgs[3].style.transform = "rotate("+(_s*6)+"deg)";
        },30);
    </script>
    </body>
</html>

JS用定时器制作时钟

猜你喜欢