Question

我正在尝试使用react做一个小问题/答案测验游戏，我想要显示一个每秒倒计时的计时器。每个游戏最多只能持续10,15或30分钟，所以我想显示一个计时器，它会在屏幕底部每秒更新一次（当然是大字体！），类似于15:00，{ {1}}，14:59等等，直至达到14:58。

因此，考虑到00:00的开始时间和添加15分钟2016-04-25T08:00:00Z后的结束时间，我想开始倒计时。

我的问题是我不了解如何使用setIntervals继续调用我的方法来查找剩余时间。

2016-04-25T08:15:00Z

Answer 1

编辑：你已经编辑了你的问题。您将需要时间填充，下面的方法将比您使用的更快，但要回答关于setInterval的问题：

首先，定义你的函数来运行你的计时器并在每次调用它时递减：

var timeLeft; // this is the time left
var elem; // DOM element where your timer text goes
var interval = null; // the interval pointer will be stored in this variable

function tick() {
  timeLeft = Math.round(timeLeft / 1000) * 1000;
  const timer = new Date(timeLeft);
  var time = timer.getUTCMinutes() + ':' + timer.getUTCSeconds();
  elem.innerHTML = time;

  timeLeft -= 1000; // decrement one second

  if (timeLeft < 0) {
    clearInterval(interval);
  }
}

interval = setInterval(tick, 1000);

OG答案：

不，我不相信有一种显示时差的内置方式。

假设您有两个日期对象：

var start = Date.now();
var end = Date.now() + 15 * 60 * 1000; // 15 minutes

然后你可以减去两个Date对象以获得它们之间的毫秒数：

var diff = (end - start) / 1000; // difference in seconds

要获得分钟数，您需要diff并将其除以60并得出结果：

var minutes = Math.floor(diff / 60);

要获得秒数，您需要使用模数来获取分钟后的余数：

var seconds = diff % 60;

但是你希望这两个用零填充，所以要做到这一点，你转换为字符串并检查它们是否是两个字符长。如果没有，则前置零：

// assumes num is a whole number
function pad2Digits(num) {
  var str = num.toString();
  if (str.length === 1) {
    str = '0' + str;
  }
  return str;
}

var time = pad2Digits(minutes) + ':' + pad2Digits(seconds);

现在你有时间分钟和秒钟。

使用javascript制作一个min：sec计数器

1 个答案: