Question

我正在尝试做这种倒计时：

现在是09:20，我想要多少分钟和几秒钟才能完成1小时。所以需要40分钟到10点。

这个倒计时必须在一天内不断计算这个差距。

我已经尝试了以下但是它没有工作：

var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();

function initClock(id) {
  const counter = document.getElementById(id);

  const minutesItem = counter.querySelector('.js-countdown-minutes');
  const secondsItem = counter.querySelector('.js-countdown-seconds');

  function updateClock() {
    mins = now.getMinutes();
    secs = now.getSeconds();

    minutesItem.innerHTML = (60 - mins);
    secondsItem.innerHTML = (secs);

  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

initClock('js-countdown');

秒数没有更新。

Answer 1

您需要重新评估now = new Date();。它没有得到每updateClock()次迭代的更新。

修正了代码：

function initClock(id, endtime) {
  const counter = document.getElementById(id);

  const minutesItem = counter.querySelector('.js-countdown-minutes');
  const secondsItem = counter.querySelector('.js-countdown-seconds');

  function updateClock() {
    var now = new Date(),
        mins = now.getMinutes(),
        secs = now.getSeconds();

    minutesItem.innerHTML = (60 - mins);
    secondsItem.innerHTML = (secs);

  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

initClock('js-countdown', 3600);

顺便说一下，前三行：

var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();

是不需要的。

Answer 2

看看这个倒计时，您可以使用此功能来获得计数器结果。

function getCountDown(initDate) {
 // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = initDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  return days + "d " + hours + "h "
  + minutes + "m " + seconds + "s "
}
// Set the date we're counting down to

var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime();
var strCounDown = getCountDown(countDownDate)

document.getElementById("demo").innerHTML = strCounDown;

<p id="demo"></p>

Answer 3

你想要实现的目标并不是很坦诚。但是，如果您希望不断更新计数器，则每次调用now函数时都必须更新updateClock变量。所以，你需要把它放在：

var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();

在updateClock功能中。因此，您不需要在代码开头的那些行。除此之外，我不明白为什么你有endtime函数的initClock参数，因为你永远不会使用它。

顺便说一下，如果你说的是倒计时，也许你想把secondsItem.innerHTML = (secs);更改为secondsItem.innerHTML = (60 - secs);。

简单小时倒计时

3 个答案: