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

最新推荐文章于 2025-08-22 13:39:56 发布

weixin_30525825

最新推荐文章于 2025-08-22 13:39:56 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xueandsi/p/5968908.html

本文介绍了一个使用CSS和JavaScript实现的动态时钟指针效果。通过transform属性实现了时钟指针随时间变化而旋转的效果，并讨论了在实现过程中遇到的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图所示，代码如下

<!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>