首页用js和html和css，制作一个最简单的走动的时钟

用js和html和css，制作一个最简单的走动的时钟

时间: 2024-05-08 07:18:11 浏览: 71

好的，可以的。您可以使用以下代码实现： HTML: ``` <!DOCTYPE html> <html> <head> <title>时钟</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="clock"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="center"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS: ``` body { background: #f2f2f2; } .clock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border-radius: 50%; border: 2px solid #333; box-sizing: border-box; } .hour-hand, .minute-hand, .second-hand { position: absolute; height: 50%; width: 6px; background: #333; transform-origin: bottom center; } .hour-hand { height: 35%; width: 10px; background: #333; } .minute-hand { height: 45%; width: 8px; background: #333; } .second-hand { height: 50%; width: 4px; background: red; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 10px; width: 10px; background: #333; border-radius: 50%; } ``` JavaScript: ``` setInterval(function() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var hourHand = document.querySelector('.hour-hand'); var minuteHand = document.querySelector('.minute-hand'); var secondHand = document.querySelector('.second-hand'); var hourDegrees = (hours / 12) * 360 + 90; var minuteDegrees = (minutes / 60) * 360 + 90; var secondDegrees = (seconds / 60) * 360 + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; minuteHand.style.transform = `rotate(${minuteDegrees}deg)`; secondHand.style.transform = `rotate(${secondDegrees}deg)`; }, 1000); ``` 希望能帮到您！

阅读全文