First draw a clock with CSS, including an hour hand, a minute hand, and a second hand.

    <div class="time" id="box">
        <div class="mid"></div>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
Copy the code

CSS styles

*{ padding: 0; margin: 0; }. Time {/* outline of the clock */ position: relative; margin: 100px auto; width: 400px; height: 400px; border: 20px solid #000; border-radius: 50%; background: url(time.jpg); background-size: 100% 100%; }. Mid {/* middle circle */ width: 25px; height: 25px; background:#3e3e3e; position: absolute; top:0; left:0; right: 0; bottom: 0; border-radius: 50%; margin: auto; z-index: 1000; } #box1{/* Second hand style */ width: 3px; height: 180px; position: absolute; left: 50%; top: 20px; border-radius: 50%; background:red; transform-origin: center bottom; z-index: 100; } #box2{/* Minute hand style */ width: 5px; height: 170px; position: absolute; left: 50%; top: 30px; background:#060606; border-radius: 2px; transform-origin: center bottom; z-index: 50; } #box3{/* clockwise style */ width: 5px; height: 140px; position: absolute; border-radius: 5px; left: 50%; top: 60px; background:#999999; z-index: 80; transform-origin: center bottom; } </style>Copy the code

Next, use JS to dynamically get the local time of the current computer

SetInterval (function (){var date = new date (); Var second = date.getseconds (); Var minute = date.getminutes (); Var hours = date.gethours (); Var s = (second/60)*360; Var m = ((second/60)+minute)/60*360; Var h = (hours+((second/60)+minute)/60)/12*360; Box1.style. transform = "rotate("+s+"deg)"; Transform = "transform ("+m+"deg)"; // Transform =" transform ("+m+"deg)"; box3.style.transform = "rotate("+h+"deg)"; }, 1000); </script>Copy the code