Question

我正在尝试创建一个倒数计时器，当我点击按钮时，计时器将根据值5,15,30运行。

我可以创建一个计时器但是我在使用设置间隔时遇到的问题是我无法将参数传递给回调函数，当我运行带有预设值的回调函数时它运行正常，但是当我传递一个参数时崩溃，

var currentTime = new Date();
      function displayCurrentTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var display = document.getElementById('now');
        display.innerHTML = (hours + '.' + minutes + '.' + seconds);
        return(new Date().getTime());
      }

      setInterval(displayCurrentTime, 1000);

      function endTime(m) {
        var display = document.getElementById('endTime');
        var endingTime = new Date(currentTime.getTime() + (m * 60 * 1000));
        var hours = endingTime.getHours();
        var minutes = endingTime.getMinutes();
        var seconds = endingTime.getSeconds();
        display.innerHTML = (hours + '.' + minutes + '.' + seconds);
        return endingTime.getTime();
      }

      function counter() {
        var display = document.getElementById('counter');
        var countingTime = endTime(1) - displayCurrentTime();
        var days = Math.floor(countingTime / (1000 * 60 * 60 * 24));
        var hours = Math.floor((countingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((countingTime % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((countingTime % (1000 * 60)) / 1000);
        return (display.innerHTML = (hours + '.' + minutes + '.' + seconds));
              }

  <button id="5" onclick="setInterval(counter, 1000)">5</button>
    <button id="15" onclick="setInterval(counter, 1000)">15</button>
    <button id="30" onclick="setInterval(counter, 1000)">30</button>
    <h3>Current Time</h3>
    <p id="now"></p>
    <h3>Your time will end at</h3>
    <p id="endTime"></p>
    <h3>You still have</h3>
    <p id="counter"></p>

Answer 1

您可以在setInterval中的延迟参数后传递您想要的任何参数。例如。 setInterval(foo, 1000, bar)。 bar将每秒作为参数传递给foo。

Answer 2

我只需在点击时设置结束时间并启动计数器。所以你的柜台

＆＃13;

var endTime = null;
function displayCurrentTime() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var display = document.getElementById('now');
    display.innerHTML = (hours + '.' + minutes + '.' + seconds);
    //just call counter here if endTime is set. in this case you only need to call updateEndTime on click
    //if(endTime != null) {
    //    counter();
    //}
}
//to avoid 1 second delay on start up
displayCurrentTime()
setInterval(displayCurrentTime, 1000);

function updateEndTime(m) {
    var display = document.getElementById('endTime');
    var currentTime = new Date();
    endTime = new Date(currentTime.getTime() + (m * 60 * 1000));
    var hours = endTime.getHours();
    var minutes = endTime.getMinutes();
    var seconds = endTime.getSeconds();
    display.innerHTML = (hours + '.' + minutes + '.' + seconds);
}

function counter() {
    var display = document.getElementById('counter');
    var currentTime = new Date();
    var countingTime = endTime - currentTime;
    var days = Math.floor(countingTime / (1000 * 60 * 60 * 24));
    var hours = Math.floor((countingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((countingTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((countingTime % (1000 * 60)) / 1000);
    display.innerHTML = (hours + '.' + minutes + '.' + seconds);
}

＆＃13;

  <button id="5" onclick="updateEndTime(5);counter();setInterval(counter, 1000)">5</button>
  <button id="15" onclick="updateEndTime(15);counter();setInterval(counter, 1000)">15</button>
  <button id="30" onclick="updateEndTime(30);counter();setInterval(counter, 1000)">30</button>
  <h3>Current Time</h3>
  <p id="now"></p>
  <h3>Your time will end at</h3>
  <p id="endTime"></p>
  <h3>You still have</h3>
  <p id="counter"></p>

＆＃13;

顺便说一下。您可能应该只使用1 setInterval并在1次呼叫检查中更新两个计数器，如果设置了endTime

纯JS倒计时器

2 个答案: