首页html5网页动态时钟源码

html5网页动态时钟源码

时间: 2023-08-17 21:02:45 浏览: 120

HTML5网页动态时钟源码可以使用JavaScript和CSS来实现。下面是一个简单的示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="clock"> <div id="hour" class="hand"></div> <div id="minute" class="hand"></div> <div id="second" class="hand"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码（style.css）： ```css .clock { width: 200px; height: 200px; background-color: #f1f1f1; border-radius: 50%; position: relative; margin: 0 auto; margin-top: 100px; overflow: hidden; } .hand { background-color: #333; position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; } #hour { width: 8px; height: 60px; margin-left: -4px; } #minute { width: 4px; height: 80px; margin-left: -2px; } #second { width: 2px; height: 100px; margin-left: -1px; } ``` JavaScript代码（script.js）： ```javascript function rotateClockHands() { var now = new Date(); var hourAngle = now.getHours() % 12 * 30 + now.getMinutes() / 2; var minuteAngle = now.getMinutes() * 6; var secondAngle = now.getSeconds() * 6; document.getElementById('hour').style.transform = 'rotate(' + hourAngle + 'deg)'; document.getElementById('minute').style.transform = 'rotate(' + minuteAngle + 'deg)'; document.getElementById('second').style.transform = 'rotate(' + secondAngle + 'deg)'; } setInterval(rotateClockHands, 1000); ``` 这段代码创建一个200x200像素的圆形时钟，并用JavaScript动态旋转时、分、秒指针。CSS用于设置时钟的样式，JavaScript负责计算当前时间并将指针旋转到正确的位置。setInterval()函数用于每秒钟更新一次指针的旋转角度，使时钟指针动起来。

阅读全文