javascript 通过面向对象编写圆形数字时钟

Posted 2020-08-14 三坷油

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 通过面向对象编写圆形数字时钟相关的知识，希望对你有一定的参考价值。

效果如图所示，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .hour{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
            border: 3px solid #666666;display: inline-block}
        .minute{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
            border: 3px solid #666666;display: inline-block}
        .second{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
            border: 3px solid #666666;display: inline-block}
        .innerLeft{height: 178px;width: 89px;position: absolute;top: 1px;left: 1px;border-radius: 178px 0 0 178px
                ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-left: 10px solid #009bff;background: white
                ;transform-origin: 100% 50%;}
        .innerRight{height: 178px;width: 89px;position: absolute;top: 1px;right: 1px;border-radius:0 178px  178px 0
            ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-right: 10px solid #009bff;background: white;transform-origin: 0 50%;
            transform: rotate(-180deg) ;}
        .cover{position: absolute;height: 200px;width: 100px;border-radius: 198px 0 0 198px;background: white;z-index: 1}
        input{position: absolute;top: 60px;left: 120px;}
        span{height: 20px;width: 80px;line-height: 20px;display: block;position: absolute;;top: 90px;
            z-index: 2; left: 60px;font-size: 16px;font-weight: bold;text-align: center}
    </style>
</head>
<body>
    <div class="hour">
        <div class="innerLeft"></div>
        <div class="cover"></div>
        <div class="innerRight"></div>
        <span></span>
    </div>
    <div class="minute">
        <div class="innerLeft"></div>
        <div class="cover"></div>
        <div class="innerRight"></div>
        <span></span>
    </div>
    <div class="second">
        <div class="innerLeft"></div>
        <div class="cover"></div>
        <div class="innerRight"></div>
        <span></span>
    </div>

    <script>
        window.onload=function(){
            function roll(progress,n) {
                innerLeft = document.querySelector(\'.\'+this.className + \' .innerLeft\');
                innerRight = document.querySelector(\'.\'+this.className +  \' .innerRight\');
                span = document.querySelector(\'.\'+this.className + \' span\');
                cover = document.querySelector(\'.\'+this.className + \' .cover\');
                span.innerHTML = progress+\'\'+this.className;

                if (progress*n < 180) {
                    console.log(this.className);
                    cover.style.display = \'block\';

                    innerLeft.style.transform = \'rotate(\' + (progress*n) + "deg)";
                    innerRight.style.transform = \'rotate(\' + (progress*n - 180) + \'deg)\';
                }
                else{
                    console.log(this.className);
                    cover.style.display = \'none\';

                    innerLeft.style.transform = \'rotate(\' + (progress*n) + "deg)";
                    innerRight.style.transform = \'rotate(0deg)\';
                }
            }
            var T=setInterval(function(){
                var time=new Date();
                var hours=time.getHours();
                var minutes=time.getMinutes();
                var seconds=time.getSeconds();
                var hour=document.querySelector(\'.hour\');
                var minute=document.querySelector(\'.minute\');
                var second=document.querySelector(\'.second\');


                roll.call(hour,hours,30);
                roll.call(minute,minutes,6);
                roll.call(second,seconds,6);
            },1000);

        }
    </script>
</body>
</html>

在编程过程中向使用tansform 来实现动态效果，但是会出现归零时逆向，最后就没有使用，接下来还是去探索一下吧。

以上是关于javascript 通过面向对象编写圆形数字时钟的主要内容，如果未能解决你的问题，请参考以下文章

用html+css+javascript制作圆形时钟

有秒计时的数字时钟（MOOC面向对象程序设计--Java语言）

中国MOOC_面向对象程序设计——Java语言_第2周对象交互_1有秒计时的数字时钟

面向对象—时钟

教你用 JavaScript 设计一个 Neumorphism 风格的数字时钟 (代码详解)