帮我在这串代码中实现多次调用同一id var day = document.getElementById('day'); var hour = document.getElementById('hour'); var minute = document.getElementById('minute'); var second = document.getElementById('second'); var inputtime = +new Date('2023-6-8 11:00:00');//自定义的毫秒数 timer();//先调用一次,避免第一次的卡顿 setInterval(timer,1000); function timer(){ var nowtime = +new Date();//返回当前的总毫秒数 var time = (nowtime) / 1000 ;// 1秒=1000毫秒 剩余需要倒计时的总秒数 var d = parseInt(time/60/60/24%30) var h = parseInt(time/60/60%24); var m = parseInt(time/60%60); var s = parseInt(time%60); // d = d < 10 ? '0' + d : d; day.innerHTML = '限时 ' + d + '天'; h = h < 10 ? '0' + h : h;//如果小于10前面补零,大于10直接填写 hour.innerHTML = h + ':'; m = m < 10 ? '0' + m : m;//如果小于10前面补零,大于10直接填写 minute.innerHTML = m + ':'; s = s < 10 ? '0' + s : s;//如果小于10前面补零,大于10直接填写 second.innerHTML = s ; }
时间: 2024-02-25 22:58:04 浏览: 62
纯JS脚本实现倒计时.docx
如果要在代码中多次调用相同的ID,你可以使用JavaScript中的`querySelectorAll`方法来选择多个元素,并使用`for`循环遍历它们,并分别进行倒计时的处理。以下是修改后的示例代码:
```javascript
// 选择所有需要倒计时的元素
var countdowns = document.querySelectorAll('.countdown');
// 定义计时器
setInterval(timer, 1000);
function timer() {
// 获取当前时间和倒计时结束时间
var nowtime = +new Date();
var inputtime = +new Date('2023-6-8 11:00:00');
// 计算剩余秒数
var time = (inputtime - nowtime) / 1000;
// 遍历所有元素,进行倒计时处理
for (var i = 0; i < countdowns.length; i++) {
var countdown = countdowns[i];
var unit = countdown.getAttribute('data-unit');
var value = 0;
switch (unit) {
case 'day':
value = parseInt(time / 60 / 60 / 24 % 30);
countdown.innerHTML = '限时 ' + value + '天';
break;
case 'hour':
value = parseInt(time / 60 / 60 % 24);
countdown.innerHTML = value < 10 ? '0' + value + ':' : value + ':';
break;
case 'minute':
value = parseInt(time / 60 % 60);
countdown.innerHTML = value < 10 ? '0' + value + ':' : value + ':';
break;
case 'second':
value = parseInt(time % 60);
countdown.innerHTML = value < 10 ? '0' + value : value;
break;
}
}
}
```
在上述代码中,我们首先使用`querySelectorAll`方法选择所有需要进行倒计时处理的元素,并将它们存储在`countdowns`数组中。然后,我们使用`setInterval`方法每隔1秒调用一次`timer`函数。
在`timer`函数中,我们首先获取当前时间和倒计时结束时间,然后计算剩余秒数。接下来,我们使用`for`循环遍历所有的倒计时元素,分别进行倒计时处理。在处理每个元素时,我们首先使用`getAttribute`方法获取该元素的`data-unit`属性值,它表示这个元素是表示天、小时、分钟还是秒。然后,根据`data-unit`属性值的不同,我们使用`switch`语句来计算出对应的倒计时值,并将它赋值给该元素的`innerHTML`属性以更新显示。
阅读全文