javascript制作钟表

JAVAscript制作钟表

本文用js制作一款简单的钟表练习
代码如下
欢迎大家交流，欢迎各位大佬指正。
HTML部分

//创建钟表
<body>
<div class="box">
    <div class="clock" id="ck">
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
    </div>
</div>

CSS 代码如下

//样式我用的是雪碧图，图片在末尾。
主要就添加图片。设置样式。还有所选图片X,Y轴距离轴心的距离。
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 500px;
            width: 500px;
            margin: 0 auto;
            position: relative;
        }
        //表盘
        .clock{
            width: 717px;
            height: 717px;
            background: url("./img/bgimage.png") no-repeat center ;
            background-position: -898px -800px;
             zoom: 69%;
        }
       
        //时针
        #hour{
            position: absolute;
            top: 510px;
            left: 520px;
            width: 244px;
            height: 17px;
            background: url("./img/bgimage.png")no-repeat center  ;
            border: 1px gray solid;
            background-position: -1848px -1031px;
            zoom: 69%;

        }
        //分针
        #min{
            position: absolute;
            top: 510px;
            left: 520px;
            width: 322px;
            height: 17px;
            background: url("./img/bgimage.png")no-repeat center  ;
            border: 1px gray solid;
            background-position: -1848px -1109px;
            zoom: 69%;

        }
        //秒针
        #sec{
            position: absolute;
            top: 516px;
            left: 520px;
            width: 336px;
            height: 6px;
            background: url("./img/bgimage.png")no-repeat center  ;
            border: 1px gray solid;
            background-position: -1848px -1191px;
            zoom: 69%;
        }
        //设置三个指针的旋转中心移动左边
        #hour,#min,#sec{
            transform-origin:left;
        }
    </style>

js代码如下

<script>
//先进行加载
    window.onload=function () {
    //获取指针元素
        var hour=document.getElementById("hour")
        var min=document.getElementById("min")
        var sec=document.getElementById("sec")
        //
        function run() {
        //获取时间对象
            var clocktime=new Date;
            //获取此时的时间
            var s = clocktime.getSeconds();
            var m = clocktime.getMinutes()+s/60;
            var h = clocktime.getHours()+m/60;
            //给指针元素赋值（计算指针旋转度数）
            sec.style.transform =  "rotate("+(s*6+270)+"deg)";
            min.style.transform = "rotate("+(m*6+270)+"deg)";
            hour.style.transform = "rotate("+(h*30+270)+"deg)";
            //设置定时器，每一秒自动一次
            var timer=window.setTimeout(run,1000);
        }
        //执行
        run();
    }
</script>

原图在此
在这里插入图片描述