javascript - 为倒计时时钟添加时间

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>