我想要一个30分钟的倒数计时器。我已将这个计时器插入2个位置(我网站的顶部和底部)。两个计时器都有相同的代码。但只有1个计时器工作,另一个没有显示。为什么会这样?代码有问题吗?
您能否展示不同的代码,以获得相同的结果,而不会出现任何错误。
function countdown() {
time = parseInt(localStorage.time);
if (isNaN(time) || time > (30*60)) {
//alert("An error occured: time left variable is corrupted, resetting timer");
localStorage.time = 30 * 60;
countdown();
return null;
}
if (time <= 0) {
//alert("Your Timer Has Run Out! We Still Got 2 Copies Left, You Could Still Try!");
return null;
}
document.getElementById('timeleft').innerText = formatTime(time);
time--;
localStorage.time = time;
setTimeout('countdown()', 1000);
}
function formatTime(time) {
minutes = Math.floor(time / 60);
seconds = time - minutes * 60;
if (String(seconds).length == 1) {
return String(minutes) + ":0" + String(seconds);
}
return String(minutes) + ":" + String(seconds);
}
countdown();
<font size="+26"><div id="timeleft"></div></font>
答案 0 :(得分:0)
您的函数将写入标识为"timeleft"
的元素。下面的调用只会选择具有该id的元素的一个实例。
document.getElementById('timeleft').innerText = formatTime(time);
对于第二个计时器,您必须使用不同的元素,类或其他方法。
function countdown(domId) {
time = parseInt(localStorage['time' + domId]);
if (isNaN(time) || time > (30*60)) {
//alert("An error occured: time left variable is corrupted, resetting timer");
localStorage.time = 30 * 60;
countdown(domId);
return null;
}
if (time <= 0) {
//alert("Your Timer Has Run Out! We Still Got 2 Copies Left, You Could Still Try!");
return null;
}
document.getElementById(domId).innerText = formatTime(time);
time--;
localStorage['time' + domId] = time;
setTimeout('countdown("' + domId + '")', 1000);
}
function formatTime(time) {
minutes = Math.floor(time / 60);
seconds = time - minutes * 60;
if (String(seconds).length == 1) {
return String(minutes) + ":0" + String(seconds);
}
return String(minutes) + ":" + String(seconds);
}
countdown('timeleft');
countdown('secondTimer');
你必须定义另一个id为"secondTimer"
的DOM元素,基本上是你所拥有的副本,即
<font size="+26"><div id="secondTimer"></div></font>
答案 1 :(得分:0)
可能是因为您使用ID来引用计时器容器。当您使用getElementById
时,您将始终获得具有相应ID的第一个元素。
使用原始javascript(没有像jQuery这样的任何框架),你可以使用类似getElementsByClassName()的东西,它会返回特定类的所有事件。
示例:强>
1)使用class
属性代替id
:
<div class="timeleft"></div>
您的实施可以是这样的:
var timers = document.getElementsByClassName('timeleft');
Array.prototype.forEach.call(timers, function(timer) {
timer.innerText = formatTime(time);
})
编辑:以下是适用于您的代码的解决方案:
function countdown() {
time = parseInt(localStorage.time);
if(isNaN(time) || time > (30 * 60)) {
//alert("An error occured: time left variable is corrupted, resetting timer");
localStorage.time = 30 * 60;
countdown();
return null;
}
if(time <= 0) {
//alert("Your Timer Has Run Out! We Still Got 2 Copies Left, You Could Still Try!");
return null;
}
var timers = document.getElementsByClassName('timeleft');
Array.prototype.forEach.call(timers, function(timer) {
timer.innerText = formatTime(time);
})
time--;
localStorage.time = time;
setTimeout('countdown()', 1000);
}
function formatTime(time) {
minutes = Math.floor(time / 60);
seconds = time - minutes * 60;
if(String(seconds).length == 1) {
return String(minutes) + ":0" + String(seconds);
}
return String(minutes) + ":" + String(seconds);
}
window.onload = function() {
countdown();
}
您可以在代码中传播这两个(或更多)标签来测试解决方案:
<div class="timeleft"></div>
<div class="timeleft"></div>
我的测试预览:
按照这种方法,您可以在页面中添加所需的计时器数量,而无需进行javascript更改:)
PS:你应该看看jQuery。它可以让您的生活更轻松,实现更清洁。
答案 2 :(得分:0)
更新:使用class
function countdown() {
time = parseInt(localStorage.time);
if(isNaN(time) || time > (30 * 60)) {
//alert("An error occured: time left variable is corrupted, resetting timer");
localStorage.time = 30 * 60;
countdown();
return null;
}
if(time <= 0) {
//alert("Your Timer Has Run Out! We Still Got 2 Copies Left, You Could Still Try!");
return null;
}
document.getElementsByClassName('timeleft')[0].innerText = formatTime(time);
document.getElementsByClassName('timeleft')[1].innerText = formatTime(time);
time--;
localStorage.time = time;
setTimeout('countdown()', 1000);
}
function formatTime(time) {
minutes = Math.floor(time / 60);
seconds = time - minutes * 60;
if(String(seconds).length == 1) {
return String(minutes) + ":0" + String(seconds);
}
return String(minutes) + ":" + String(seconds);
}
countdown();
<font size="+26"><div class="timeleft"></div></font>
<font size="+26"><div class="timeleft"></div></font>