首页html罗盘时钟的代码

html罗盘时钟的代码

时间: 2023-09-12 21:03:25 浏览: 185

你好，以下是一个简单的 HTML 罗盘时钟的代码： ```html <!DOCTYPE html> <html> <head> <title>罗盘时钟</title> <style type="text/css"> body { text-align: center; font-family: Arial, sans-serif; font-size: 20px; margin-top: 100px; } .clock { width: 400px; height: 400px; margin: 0 auto; position: relative; } .hour, .minute, .second { width: 0; height: 0; position: absolute; top: 50%; left: 50%; transform-origin: bottom center; transform: translate(-50%, -50%); } .hour { border-left: 10px solid #000; height: 40px; } .minute { border-left: 6px solid #000; height: 80px; } .second { border-left: 2px solid #f00; height: 100px; } .small-circle, .big-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .small-circle { width: 10px; height: 10px; background-color: #000; } .big-circle { width: 20px; height: 20px; border: 2px solid #000; } </style> </head> <body> <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="small-circle"></div> <div class="big-circle"></div> </div> <script type="text/javascript"> function getTime() { let now = new Date(); let hours = now.getHours(); let minutes = now.getMinutes(); let seconds = now.getSeconds(); let hourDegree = hours * 30 + minutes * 0.5 - 90; let minuteDegree = minutes * 6 + seconds * 0.1 - 90; let secondDegree = seconds * 6 - 90; document.querySelector('.hour').style.transform = `rotate(${hourDegree}deg)`; document.querySelector('.minute').style.transform = `rotate(${minuteDegree}deg)`; document.querySelector('.second').style.transform = `rotate(${secondDegree}deg)`; } setInterval(getTime, 1000); </script> </body> </html> ``` 希望能对你有帮助！如果你有任何其他问题，可以再问我。

阅读全文