Thực hiện:

* Ta tạo 3 lớp kim đồng hồ bằng đối tượng "div" hình vuông rồi chồng khít lên nhau.
* Trong 3 lớp này dùng ":before" và ":after" hình chữ nhật làm thành kim.
* Việc còn lại là dùng Javascript để xoay 3 đối tượng "div" này theo giờ.

Code hoàn chỉnh:

<style> .kim { position: absolute; width: 100%; height:100%; left:0px; top:0px; } .kim:before { content: ""; position: absolute; width: 2px; height:50%; left:59px; top:0px; box-shadow: 0px 0px 3px #666; background: red; } .kimgio:before {left:57px; top:18px; height:42%; width: 6px; background: black;} .kimphut:before {left:58px; top:8px; width: 4px; background: yellow;} .kimgiay:before {height:64%;} .kimgiay:after { content: ""; position: absolute; border-radius:100%; width: 10px; height:10px; left:55px; top:55px; background: red; } </style> <div class="tabClock" style="width:100%; height:auto; overflow:hidden;"> <div id="clock1" style="width:505px; height:687px; margin:0px auto; background:url('https://vinatoday.github.io/page1/uploads/1551174213.jpg') no-repeat; position:relative;"> <img src="https://vinatoday.github.io/page1/uploads/1551174213.jpg"> </div> </div> <script> function clock(tab,width, left,top){ var tab= document.getElementById(tab); var minute= -1; function changeMinute(hn){ var gocGio= Math.floor((hn.getHours() % 12 * 60 + hn.getMinutes()) / 720 * 360); var gocPhut= Math.floor(hn.getMinutes() / 60 * 360); kimgio.style= "transform: rotate("+gocGio+"deg);"; kimphut.style= "transform: rotate("+gocPhut+"deg);"; } function runClock(){ var hn= new Date(); var gocGiay= Math.floor(hn.getSeconds() / 60 * 360); kimgiay.style= "transform: rotate("+gocGiay+"deg)"; //xoay kim if(minute != hn.getMinutes()) {minute= hn.getMinutes(); changeMinute(hn);} } function addClock(){ left= Math.floor(left-width/2); top= Math.floor(top- width/2); var html= '<div class="clock" style="width:'+width+'px; height:'+width+'px; left:'+left+'px; top:'+top+'px; position:absolute;">'; //tạo 3 lớp kim chồng lên nhau html+= '<div class="kim kimgio" id="kimgio"></div>'; html+= '<div class="kim kimphut" id="kimphut"></div>'; html+= '<div class="kim kimgiay" id="kimgiay"></div>'; html+= '</div>'; tab.innerHTML= html; } addClock(); var kimgio= document.getElementById("kimgio"); var kimphut= document.getElementById("kimphut"); var kimgiay= document.getElementById("kimgiay"); runClock(); setInterval(runClock,1000); } clock1= new clock("clock1",120, 212,263); </script>