首页JS编写程序，实现电子时钟效果，要求每隔1秒获取一次当前时间，并提供一个按钮实现电子时钟

JS编写程序，实现电子时钟效果，要求每隔1秒获取一次当前时间，并提供一个按钮实现电子时钟

时间: 2023-07-07 19:05:45 浏览: 579

js实现电子时钟，包含当前时间、倒计时等

最简单的闹钟 js代码

HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>电子时钟</title> </head> <body> <div id="clock"></div> <button onclick="startClock()">启动时钟</button> <button onclick="stopClock()">停止时钟</button> </body> </html> ``` JS代码： ```javascript var clock = document.getElementById("clock"); var timer; function startClock() { timer = setInterval(function() { var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); clock.innerHTML = hour + ":" + minute + ":" + second; }, 1000); } function stopClock() { clearInterval(timer); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } ``` 首先通过 `document.getElementById` 方法获取到 `id` 为 `clock` 的 `div` 元素，然后定义一个 `timer` 变量用于存储定时器的返回值。 `startClock()` 函数用于启动时钟，通过 `setInterval` 方法每隔1秒执行一次匿名函数，该函数获取当前时间并将其格式化为小时、分钟、秒钟的形式，通过 `innerHTML` 属性将时间显示在 `clock` 元素中。 `stopClock()` 函数用于停止时钟，通过 `clearInterval` 方法清除定时器，停止时钟的运行。 `checkTime()` 函数用于格式化时间，如果小时、分钟或秒钟小于10，则在前面加上一个0。

阅读全文