js时钟案例

悠悠 2022-03-25 06:08 334阅读 0赞

> 之前觉得利用js来实现时钟功能是一件 特别优秀的事，现在，我发现它不仅优秀而且可以练习代码，难度适中。

总体思想：时钟的针及表框为图片；各种针的转动为css样式；利用date属性获取一次当前的属性；利用时 分 秒的关系得出角度；

案例用图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

代码及注释如下

<!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            /* 主要是从一张大的雪碧图中找到所需要的表圈形状和相对应的时针、分针和秒针 */
            * {
                margin: 0;
                padding: 0;
            }
    
            #block {
                overflow: hidden;
                position: relative;
                width: 722px;
                height: 722px;
                margin: 0 auto;
                background-image: url("./img/bgimage.png");
                background-position: -895px -795px;
                /* 利用背景图片来显示 */
            }
    
            #block>div {
                position: absolute;
            }
    
            .s {
                width: 180px;
                height: 27px;
                left: 361px;
                top: 349px;
                background-image: url("./img/bgimage.png");
                background-position: -1848px -1026px;
                transform-origin: 0 50%;
            }
    
            .f {
                width: 260px;
                height: 27px;
                left: 361px;
                top: 349px;
                background-image: url("./img/bgimage.png");
                background-position: -1848px -1104px;
                transform-origin: 0 50%;
            }
    
            .m {
                width: 330px;
                height: 27px;
                left: 361px;
                top: 349px;
                background-image: url("./img/bgimage.png");
                background-position: -1848px -1180px;
                transform-origin: 0 50%;
            }
        </style>
    </head>
    
    <body>
        <div id="block">
            <div class="s"></div>
            <div class="f"></div>
            <div class="m"></div>
            <script>
                // var s=document.getElementsByClassName('s')[0];
                // var f=document.getElementsByClassName('f')[0];
                // var m=document.getElementsByClassName('m')[0];
                // var date=new Date();
                // var hour=date.getHours();//调取当前时间的小时
                // // console.log(hour);
                // var min=date.getMinutes();//调取当前时间的分钟
                // var sec=date.getSeconds();//调取当前时间的秒
                setInterval(function () {
                    var s = document.getElementsByClassName('s')[0];
                    var f = document.getElementsByClassName('f')[0];
                    var m = document.getElementsByClassName('m')[0];
                    var date = new Date();
                    var hour = date.getHours(); //调取当前时间的小时
                    // console.log(hour);
                    var min = date.getMinutes(); //调取当前时间的分钟
                    var sec = date.getSeconds(); //调取当前时间的秒
    // 关于转动角度的关系具体如下：1 hour=60min =3600s
    // 先分别转动对应针的角度，比如时针共有12格，转动角度就是当前的小时数*30deg
    // 最后实现联动：计算分针的角度时，将已经转过的秒针时间转化为分钟，一起计算角度
    //计算时针角度时，将已转过的分针和秒针时间转化为小时，一起计算角度
                    m.style.transform = "rotate(" + ((sec * 6) - 90) + "deg)";
                    f.style.transform="rotate("+(((min+(sec/60))*6)-90)+"deg)";
                    s.style.transform="rotate("+(((hour+(sec/3600)+(min/60))*30)-90)+"deg)"
                }, 1000)
            </script>
        </div>
    </body>
    
    </html>

实现结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220325/927de30441184b409771f37e56e1d703.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1]: /images/20220325/f18a11535bd1415e9146e55e5b9337ab.png