Making of simple clock

This is a simple clock made by myself according to the current time. If there is any problem, please give me some advice

The first is simple page layout:

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

Then CSS styles:

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

This is the page display effect. You can also make a better page display effect than me according to your hi mark. I'm a garbage spot:

Finally, js style:

    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)

You can see the effect by running it yourself

Finally, thank you for watching my chicken operation

Tags: Javascript

Posted on Sun, 03 May 2020 03:59:42 -0400 by hbuchel