简易时钟的制作

2018-06-24 01:25:13来源：未知阅读 ()

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

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

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