Question

我正在尝试执行一个相当简单的功能，即单击按钮会增加时间。

示例如下：

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    // trying to add time with this line
    _second + 30000;
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

在函数addTime中，我只需要增加30秒即可。 _seconds是一个全局变量，只是尝试对其进行简单添加，但它不起作用，我也不知道为什么。

_seconds++也不执行任何操作。

我想念什么？为什么不能添加到全局变量_seconds？如何执行此简单操作？

编辑：

我只是想打distance，因为_second只是在测量时间，实际上不是剩余时间

所以我更改为：

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

var now = new Date();
var distance = end - now;

function showRemaining() {
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    distance + 30000;
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

发生了什么，我不明白这是计时器完全停止，并且按钮根本不起作用。

为什么将这两个变量移出函数中断？

编辑＃2

以下评论建议采用这种方法：

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var offset = 0;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    offset += 30000;
    distance = end - now - offset;
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

Answer 1

在您的第一个示例中，我更改了四行以使其正常工作。它们在注释中由＃1，＃2，＃3和＃4标记。＃4纯粹是装饰性的，可以使计时器立即更新。

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var offset = 0; // #1
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now + offset; // #2
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    // trying to add time with this line
    offset = offset + 30000; // #3
    showRemaining(); // #4
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

Answer 2

要获得更好的可重用性，您可以使用诸如factory之类的东西，并根据需要创建任意数量的计时器。您可以参数化它们，它们将是独立的。

function createTimer(end, timeElement, addTimeButton) {
  var endDate = new Date(end);
  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = endDate - now;

    if (distance < 0) {
      clearInterval(timer);
      timeElement.textContent = "HAPPY NEW YEAR!";
      return;
    }

    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);
    var timeString = days + " days, " + hours + " hrs, " + minutes + " mins, " + seconds + " secs";

    timeElement.textContent = timeString;
  }

  timer = setInterval(showRemaining, 1000);

  function addTime() {
    endDate.setSeconds(endDate.getSeconds() + 30);
    timeElement.style.color = "green";

    setTimeout(function() {
      timeElement.style.color = "#000";
    }, 1000);
  }

  addTimeButton.addEventListener("click", addTime);

  return function clearTimer() {
    clearInterval(timer);
    addTimeButton.removeEventListener("click", addTime);
  };
}

var clearTimer = createTimer(
  "01/01/2019 12:00 AM",
  document.getElementById("time"),
  document.getElementById("addtime")
);

<div id="time"></div>
<button id="addtime">Place Bid</button>

如果需要取消，可以致电clearTimer()。而且请不要对简单的字符串使用Element.innerHTML

为倒数时钟增加时间

2 个答案: