用jQuery写一个正计时
时间: 2023-12-29 08:15:04 浏览: 22
好的,下面是一个使用 jQuery 实现正计时的示例代码:
HTML代码:
```html
<div id="countdown">
<span id="hours">00</span> :
<span id="minutes">00</span> :
<span id="seconds">00</span>
</div>
```
JavaScript 代码:
```javascript
$(document).ready(function() {
// 设置截止时间(单位:秒)
var countDownDate = new Date().getTime() + 3600000; // 1小时后
// 更新计时器
var x = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算距离截止时间还剩下多少毫秒
var distance = countDownDate - now;
// 将毫秒转换为小时、分钟、秒数
var hours = Math.floor(distance / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 显示计时器
$("#hours").text(hours.toString().padStart(2, "0"));
$("#minutes").text(minutes.toString().padStart(2, "0"));
$("#seconds").text(seconds.toString().padStart(2, "0"));
// 如果时间到了,停止计时器
if (distance < 0) {
clearInterval(x);
$("#countdown").text("TIME'S UP!");
}
}, 1000); // 每秒钟更新一次计时器
});
```
这个示例代码会在页面加载完成后开始计时,并且每秒钟更新一次计时器。当到达截止时间后,计时器会显示 "TIME'S UP!"。