首页请给我一段jQuery编写的计时器代码

请给我一段jQuery编写的计时器代码

时间: 2023-11-28 10:48:40 浏览: 65

以下是一个简单的jQuery计时器代码，可以根据需要进行修改： ```html <!DOCTYPE html> <html> <head> <title>jQuery计时器</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div id="timer">00:00:00</div> <button id="start">开始</button> <button id="stop">停止</button> <script> var timer = null; var hours = 0, minutes = 0, seconds = 0; $('#start').click(function() { timer = setInterval(updateTimer, 1000); }); $('#stop').click(function() { clearInterval(timer); }); function updateTimer() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; if (minutes >= 60) { minutes = 0; hours++; } } $('#timer').text(pad(hours) + ':' + pad(minutes) + ':' + pad(seconds)); } function pad(num) { return num < 10 ? '0' + num : num; } </script> </body> </html> ``` 在上面的代码中，我们使用了 jQuery 的 click 函数来分别处理开始和停止按钮的点击事件。当开始按钮被点击时，我们使用 setInterval 函数来启动计时器，并且每秒钟执行一次 updateTimer 函数。停止按钮则通过 clearInterval 函数来停止计时器。 updateTimer 函数负责更新计时器的显示，使用了简单的逻辑来增加小时、分钟和秒钟，并且使用 pad 函数来确保它们以两位数字的格式显示。

阅读全文