利用JavaScript或Jquery以及window对象的setTimeout或setInterval方法实现网页计时器。设计时长为2两小时,可以为倒计时也可以为正计时。界面显示方式自定。
时间: 2024-03-27 10:35:54 浏览: 96
下面是一个简单的示例,实现的是一个倒计时器,时长为两个小时,每秒钟更新一次。
HTML 代码:
```html
<div id="countdown"></div>
```
JavaScript 代码:
```javascript
// 获取显示倒计时的元素
var countdownElement = document.getElementById('countdown');
// 设置倒计时的时长,单位为秒
var duration = 2 * 60 * 60;
// 定义一个函数,用于更新倒计时的显示
function updateCountdown() {
// 计算剩余的小时数、分钟数和秒数
var hours = Math.floor(duration / 3600);
var minutes = Math.floor((duration % 3600) / 60);
var seconds = duration % 60;
// 格式化显示字符串
var displayString = ('0' + hours).slice(-2) + ':' +
('0' + minutes).slice(-2) + ':' +
('0' + seconds).slice(-2);
// 更新显示
countdownElement.textContent = displayString;
// 减少剩余时间
duration--;
// 如果倒计时结束,清除定时器
if (duration < 0) {
clearInterval(intervalId);
countdownElement.textContent = '倒计时结束';
}
}
// 初始化倒计时显示
updateCountdown();
// 每秒钟更新一次倒计时
var intervalId = setInterval(updateCountdown, 1000);
```
在上面的代码中,我们首先获取了一个用于显示倒计时的元素,然后设置了倒计时的时长,单位为秒。接着,我们定义了一个名为 `updateCountdown` 的函数,用于更新倒计时的显示。在这个函数中,我们首先计算了剩余的小时数、分钟数和秒数,然后格式化显示字符串,并更新了倒计时的显示。最后,我们减少了剩余时间,并检查倒计时是否结束,如果结束,则清除定时器,并显示倒计时结束的消息。
在初始化倒计时显示后,我们使用 `setInterval` 方法每秒钟调用一次 `updateCountdown` 函数,实现了倒计时的功能。
阅读全文