简易时钟的制作

最新推荐文章于 2022-11-23 14:12:16 发布

weixin_33939843

最新推荐文章于 2022-11-23 14:12:16 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bigcrank/p/8350609.html

本文介绍了一款使用HTML、CSS及JavaScript实现的简易网页时钟。该时钟通过动态更新页面元素来显示实时的时间，包括小时、分钟和秒。作者分享了具体的代码实现，并提供了页面布局、样式设置和定时更新时间的JavaScript逻辑。

这是我自己根据现在时间做的简易的时钟,如果有哪里不好的多多指点.

首先是简简单单的页面布局:

<div id="tab">
    <div id="Tradion">
        <div id="hours" class="tran"></div>
        <div id="minutes" class="tran"></div>
        <div id="seconds" class="tran"></div>
        <div id="dian"></div>
    </div>
</div>

然后是CSS样式:

<style type="text/css">
        #Tradion{
            width: 100px;
            height: 100px;
            border: 2px solid #fff;
            border-radius: 100px;
            float: left;
            margin: 50px 50px;
        }
        #hours{
            width: 30px;
            height: 2px;
            margin:50px 50px;
            background: #fff;
            transform-origin: left bottom;
        }
        #minutes{
            width: 38px;
            height: 2px;
            background: #fff;
            margin:-50px 50px;
            transform-origin: left bottom;
        }
        #seconds{
            width: 45px;
            height: 1px;
            background: #fff;
            margin:50px 50px;
            transform-origin: left bottom;

        }
        .tran{
        }
        #dian{
            width:6px;
            height: 6px;
            border-radius: 6px;
            background: #fff;
            margin:-55px 46px;
        }
</style>

这是页面显示的效果,你们也可以根据自己的喜号做个比我更好看的页面显示效果,我这个垃圾点了:

最后就是js样式了:

    var d = new Date();
    var num3 = d.getHours();
    var num2 = d.getMinutes();
    var num1 = d.getSeconds();
    a = num1*6-90;
    b = num2*6-90;
    c = num3*30-90;
    seconds.style.transform = "rotate(" + a + "deg)";
    minutes.style.transform = "rotate(" + b + "deg)";
    hours.style.transform = "rotate(" + c + "deg)";
    var timer = setInterval(function() {
        var d = new Date();
        var num3 = d.getHours();
        var num2 = d.getMinutes();
        var num1 = d.getSeconds();
        a = num1*6-90;
        b = num2*6-90;
        c = num3*30-90;
        seconds.style.transform = "rotate(" + a + "deg)";
        minutes.style.transform = "rotate(" + b + "deg)";
        hours.style.transform = "rotate(" + c+ "deg)";
    }, 1000)