javascript - 使用 moment.js 动态更改倒计时值

Question

这是一个使用 moment.js 库的倒计时代码。该代码可以正常工作。我正在尝试一项附加功能，但无法使其正常工作。当倒计时在页面上运行时。单击 Add30Sec 按钮时，当前倒计时应增加 30 秒。因此，如果单击按钮时当前值为 3 分 23 秒，则应变为 3 分 53 秒。

theCountDown(5);
document.getElementById("myBtn").addEventListener("click", function() {

});

function theCountDown(setMinutes) {
  const second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;
  var newDateObj = moment(Date()).add(setMinutes, "m").toDate();
  let countDown = newDateObj.getTime(),
    x = setInterval(function() {
      let now = new Date().getTime(),
        distance = countDown - now;
      (document.getElementById("days").innerText = Math.floor(distance / day)),
      (document.getElementById("hours").innerText = Math.floor(
        (distance % day) / hour
      )),
      (document.getElementById("minutes").innerText = Math.floor(
        (distance % hour) / minute
      )),
      (document.getElementById("seconds").innerText = Math.floor(
        (distance % minute) / second
      ));
      //do something later when date is reached
      if (distance < 0) {
        clearInterval(x);
        $(".container").children().removeClass().addClass("dissappear");
        $(".container2").hide();
        $("body").addClass("green");
        // .removeClass()
        // .addclass('dissappear')
        // 'IT'S MY BIRTHDAY!;
      }
    }, second);
}

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

<button type="button" id="myBtn">Click</button>

<span id="days"></span>

<span id="hours"></span>

<span id="minutes"></span>

<span id="seconds"></span>

<div class="container">Container 1</div>

<div class="container2">Container 2</div>

Answer 1

像这样

我放弃了不必要的时刻，无论如何都会给出控制台警告

var countDown;
theCountDown(5);
document.getElementById("myBtn").addEventListener("click", function() {
  countDown += 30000;
  console.log(new Date(countDown))
});

function theCountDown(setMinutes) {
  const second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;
  let newDateObj = new Date();
  newDateObj.setMinutes(newDateObj.getMinutes()+setMinutes)
  countDown = newDateObj.getTime(),
    x = setInterval(function() {
      let now = new Date().getTime(),
        distance = window.countDown - now;
      (document.getElementById("days").innerText = Math.floor(distance / day)),
      (document.getElementById("hours").innerText = Math.floor(
        (distance % day) / hour
      )),
      (document.getElementById("minutes").innerText = Math.floor(
        (distance % hour) / minute
      )),
      (document.getElementById("seconds").innerText = Math.floor(
        (distance % minute) / second
      ));
      //do something later when date is reached
      if (distance < 0) {
        clearInterval(x);
        $(".container").children().removeClass().addClass("dissappear");
        $(".container2").hide();
        $("body").addClass("green");
        // .removeClass()
        // .addclass('dissappear')
        // 'IT'S MY BIRTHDAY!;
      }
    }, second);
}

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

<button type="button" id="myBtn">Click</button>

<span id="days"></span>

<span id="hours"></span>

<span id="minutes"></span>

<span id="seconds"></span>

<div class="container">Container 1</div>

<div class="container2">Container 2</div>