Javascript 倒计时计时器不工作

我想要一个30分钟的倒计时。我在两个地方（我的网站顶部和底部）插入了这个计时器。两个计时器的代码相同。但只有一个计时器工作，另一个不显示。为什么会这样？代码有问题吗

你能展示一个不同的代码来获得相同的结果，没有任何错误吗

函数倒计时（）{
time=parseInt（localStorage.time）；
如果（isNaN（时间）|时间>（30*60））{
//警报（“发生错误：time left变量已损坏，正在重置计时器”）；
localStorage.time=30*60；
倒计时（）；
返回null；
}
如果（time您的函数将写入id为
的元素“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来引用计时器容器。当您使用
getElementById
时，您将始终获得第一个具有相应ID的元素

使用原始javascript（没有像jQuery这样的框架），您可以使用类似的东西，它将返回特定类的所有事件

示例：

<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();
}

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>

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();
}

函数倒计时（）{
time=parseInt（localStorage.time）；
如果（isNaN（时间）|时间>（30*60））{
//警报（“发生错误：time left变量已损坏，正在重置计时器”）；
localStorage.time=30*60；
倒计时（）；
返回null；
}
如果（时间更新：使用
class


函数倒计时（）{
time=parseInt（localStorage.time）；
如果（isNaN（时间）|时间>（30*60））{
//警报（“发生错误：time left变量已损坏，正在重置计时器”）；
localStorage.time=30*60；
倒计时（）；
返回null；
}
如果（time@Jerek）两个计时器都暂停/不使用此代码。无论如何，感谢您的帮助。啊，是的，我明白了，挂断in@Doing97尝试now@Jerek两个计时器的计时时间均为2秒，持续1秒。请自行查看。我已将您的代码应用到我的网站。感谢您的代码，但在实现您的更改后，两个计时器都冻结（暂停）。您可以显示完整的代码吗？请尝试删除
函数倒计时（domId）{…}
@谢谢，网站的代码部分只接受javascript和html。没问题@Doing97。考虑到您的上下文，我强烈建议您使用
getElementsByClassName（）
而不是
getElementById
。第二个是不可伸缩的。每次需要添加新计时器时，都需要添加更多函数调用。感谢您提供的代码，但在我尝试实现它之后，两个计时器都冻结（暂停/不工作）.你能展示你的完整代码吗？@Doing97嘿，我的朋友。我更新了答案，给出了完整的解决方案。如果你有任何问题，请告诉我：）非常感谢，言语无法形容我的幸福。