javascript制作钟表

朱雀 2022-01-31 23:17 328阅读 0赞

**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代码如下

原图在此  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxMjk3Mw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxMjk3Mw_size_16_color_FFFFFF_t_70]: /images/20220201/a49a5bb3b372401d92dbf33224c3f79d.png