点击Start rit按钮获取时钟当前时间并显示的技术问题
2026-5-6
解决点击按钮获取当前时钟时间并显示的问题
看起来你遇到的核心需求是：主时钟保持正常运行，只在点击按钮时抓取当前显示的时间并放到txt元素里。咱们一步步来修正你的代码，解决当前的问题：
问题分析
- 你原有的
CurrentTime函数需要接收time参数，但按钮的onclick="CurrentTime()"没有传参，导致点击后无法显示正确内容。 ItsShowTime里每次调用CurrentTime(time)会让txt实时跟着时钟更新，这和你“点击按钮才显示”的需求不符。- 完全不需要停止主时钟的计时器——你要的只是获取当前时间的快照，而非暂停时钟运行。
修正后的完整代码
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Digital Clock</title> <script> function ItsShowTime() { var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); // 补零处理 h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s; document.getElementById("Clock").textContent = time; // 持续更新主时钟 setTimeout(ItsShowTime, 1000); } // 按钮点击时执行的函数：抓取当前时钟时间并显示到txt function captureCurrentTime() { // 最简单的方式：直接读取Clock元素的当前文本，和主时钟完全同步 var currentClockTime = document.getElementById("Clock").textContent; document.getElementById("txt").textContent = currentClockTime; // 也可以选择重新计算一次当前时间（效果和上面一致）： // var date = new Date(); // var h = date.getHours(); // var m = date.getMinutes(); // var s = date.getSeconds(); // h = (h < 10) ? "0" + h : h; // m = (m < 10) ? "0" + m : m; // s = (s < 10) ? "0" + s : s; // document.getElementById("txt").textContent = h + ":" + m + ":" + s; } // 初始化启动主时钟 ItsShowTime(); </script> </head> <body> <input type="button" value="Start rit" onclick="captureCurrentTime()"> <div id="txt"></div> <div id="Clock"></div> </body> </html>
关键修改点
- 移除了
ItsShowTime里自动调用CurrentTime的代码，让txt不再实时更新，只在点击按钮时变化。 - 新增了
captureCurrentTime函数，专门处理按钮点击逻辑：要么直接读取Clock元素的当前文本（最便捷的同步方式），要么重新计算一次当前时间。 - 按钮的
onclick改为调用captureCurrentTime()，点击后就能把当前时钟时间显示到txt里，同时主时钟会持续正常运行，不会出现多余计时器或中断问题。
这样就完全符合你的需求了：主时钟一直正常走，点击按钮才抓取当前时间显示到指定区域，没有任何额外的冲突。
内容的提问来源于stack exchange，提问作者McBoomin
