| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| .shizhong{ | |
| width: 600px; | |
| height: 600px; | |
| background-image: url("image/clock.jpg"); | |
| margin:0 auto; | |
| position: relative; | |
| } | |
| .hour{ | |
| position: absolute; | |
| left: 283px; | |
| } | |
| .minute{ | |
| position: absolute; | |
| left: 283px; | |
| } | |
| .second{ | |
| position: absolute; | |
| left: 283px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="shizhong"> | |
| <img class="hour" src="image/hour.png" alt=""> | |
| <img class="minute" src="image/minute.png" alt=""> | |
| <img class="second" src="image/second.png" alt=""> | |
| </div> | |
| <script> | |
| setInterval(abc,100); | |
| function abc() { | |
| var oHour=document.getElementsByClassName("hour"); | |
| var oMinute=document.getElementsByClassName("minute"); | |
| var oSecond=document.getElementsByClassName("second"); | |
| var time=new Date(); | |
| var nowHour=time.getHours(); | |
| var nowMinute=time.getMinutes(); | |
| var nowSecond=time.getSeconds(); | |
| oHour[0].style.transform="rotate("+30*nowHour+"deg)"; | |
| oMinute[0].style.transform="rotate("+6*nowMinute+"deg)"; | |
| oSecond[0].style.transform="rotate("+1*nowSecond+"deg)"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
时钟的制作
猜你喜欢
转载自blog.csdn.net/weixin_42413689/article/details/80848733
今日推荐
周排行