倒数计时器不起作用

Question

我想要一个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>

Answer 1

您的函数将写入标识为"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>

Answer 2

可能是因为您使用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。它可以让您的生活更轻松，实现更清洁。

Answer 3

更新：使用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>