Implement a clock effect with JS

(Rendering)

in two steps.

Step 1: To get the current hour, minute and second

But there is a little mystery here.

For example, it is exactly 9 o'clock, and the hour hand points to 9, which is correct.

But if it's 9:30 now, the hour hand should point between 9 and 10.

So, we have to get not only the current hour, but also how many minutes have passed

ms = date.getMilliseconds(); // the current number of milliseconds 
s = date.getSeconds() + ms / 1000;   //   get seconds 1.3 s 
m = date.getMinutes() + s / 60;   //   get the score 45.6 minutes 
h = date.getHours() % 12 + m / 60 ;

Step 2: Principle of Rotation Angle

The second hand makes one revolution of 360° for a total of 60 seconds 6° per second

Minute hand One circle 360 60 times in one circle 6° each time 6° per minute

The hour hand makes a circle of 360, a total of 12 dials without 24 hours, and moves 30° per hour

full code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin:50px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            
        }
        .h {
            background: url(images/hour.png) no-repeat center center;
        }
        .m {
            background: url(images/minute.png) no-repeat center center;
        }
        .s {
            background: url(images/second.png) no-repeat center center;
        }

    </style>
</head>
<body>
<div class="clock">
    <div class="h" id="hour"></div>
    <div class="m" id="minute"></div>
    <div class="s" id="second"></div>
</div>
</body>
</html>

<script>
  var hour = document.getElementById("hour");
  var minute = document.getElementById("minute");
  var second = document.getElementById("second");
    // 开始定时器
   var s = 0,m = 0, h = 0, ms = 0;
    setInterval( function () {
           // The content is 
        fine var date = new Date();   // Get the latest time 
        ms = date.getMilliseconds(); // The current number of milliseconds 
        s = date.getSeconds() + ms / 1000;   //   get seconds 1.3 s 
        m = date.getMinutes() + s / 60;   //   get minutes 45.6 minutes 
        h = date.getHours() % 12 + m / 60 ;
         // console.log(h) ; 
        // Rotation angle 
       // A circle of 360 ° has a total of 60 seconds per second 6 ° is now s seconds 
        second.style.WebkitTransform = "rotate("+ s*6 +"deg)" ;
                     //   Change rotation deg degree 
        minute.style.WebkitTransform = "rotate("+ m*6 +"deg)" ;
        hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
        second.style.MozTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.MozTransform = "rotate("+ m*6 +"deg)";
        hour.style.MozTransform = "rotate("+ h*30 +"deg)";
    },100);
</script>

Attach required pictures

Implement a clock effect with JS

Guess you like