html电子动态时钟代码
HTML电子动态时钟是一种实用而重要的网页元素,它能够向用户展示当前的时间。在网站的头部、页面底部等位置都可以设置一个动态时钟,为用户提供便利。
<html> <head> <title>动态时钟</title> <style> body { background-color: #444; font-family: monospace; } .clock { color: white; font-size: 100px; text-align: center; margin-top: 20%; } </style> </head> <body> <div class="clock"></div> <script> function getTime() { let date = new Date(); let hour = date.getHours(); let minute = date.getMinutes(); let second = date.getSeconds(); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); let timeString = hour + ":" + minute + ":" + second; document.querySelector(".clock").innerHTML = timeString; setTimeout(getTime, 1000); } function checkTime(i) { if (i<10) { i = "0" + i; } return i; } getTime(); </script> </body> </html>
以上代码中,使用了JavaScript的Date对象获取当前时间,并引入了定时器函数setTimeout来更新时钟的时间。同时,为了美化时钟的外观,还通过CSS样式对时钟元素进行了设置。
该动态时钟代码可以在所有的现代浏览器中运行,并且非常简单易懂,可以方便地进行二次开发,满足不同网站对动态时钟的需求。