首页js实现电子时钟效果，要求每隔1秒获取一次当前时间，并提供一个按钮控制电子时钟让其停止。

js实现电子时钟效果，要求每隔1秒获取一次当前时间，并提供一个按钮控制电子时钟让其停止。

时间: 2024-03-17 10:46:04 浏览: 151

好的，以下是实现电子时钟效果的JavaScript代码： ```html <!DOCTYPE html> <html> <head> <title>电子时钟效果</title> <style type="text/css"> body { text-align: center; font-size: 60px; margin-top: 200px; } </style> </head> <body> <p id="clock"></p> <button id="stopBtn">停止</button> <script type="text/javascript"> var clock = document.getElementById('clock'); var stopBtn = document.getElementById('stopBtn'); var timer; // 计时器 // 获取当前时间并更新到页面 function updateClock() { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); clock.innerHTML = hour + ":" + minute + ":" + second; } // 将小于10的数字前补0 function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } // 开始计时器 timer = setInterval(updateClock, 1000); // 点击按钮停止计时器 stopBtn.onclick = function() { clearInterval(timer); alert("计时器已停止！"); }; </script> </body> </html> ``` 以上代码通过setInterval()函数每隔1秒获取一次当前时间并更新到页面上，同时提供了一个按钮控制计时器停止。

阅读全文