使用javascript制作min：sec计数器

我正在尝试使用react做一个小问题/答案问答游戏，并且我想显示一个每秒倒计时的计时器。每个游戏最多可以持续10,15或30分钟，所以我想要显示一个计时器，每秒更新一次屏幕底部（当然是大字体！），如15:00,14:59,14:58和直到它遇到00:00。使用javascript制作min：sec计数器

因此，给定一个开始时间，如2016-04-25T08:00:00Z，以及加上2016-04-25T08:15:00Z 15分钟后的结束时间，我想开始倒计时。

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

timeLeft = Math.round(timeLeft/1000) * 1000; 
const timer = new Date(timeLeft); 
return timer.getUTCMinutes() + ':' + timer.getUTCSeconds();

来源

2016-04-25 user1354934

我没有完全理解你，但你应该看看[moment.js]（http://momentjs.com/docs）一个非常强大的JS库来处理日期和时间。对于你所描述的你需要看看他们的文档中的“显示”部分 – ChicoDelaBarrio

@RaybanM你能看到我更新的问题吗？我坚持使用setInterval来调用我的方法，每隔1秒做一次。谢谢，我会检查出moment.js！ – user1354934

我懒得写出答案，但前段时间我在一个自己的项目中“解决”了这个问题。相关代码是https://github.com/jwronline/dashboard/blob/gh-pages/src/js/main.js#L238-L292 –

编辑：你已经编辑你的问题。您需要的时候填充，下面的方法会比你用的是什么速度更快，但要回答你的问题有关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);

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

来源

2016-04-25 06:27:22 PitaJ

谢谢@PitaJ。我实际上记录了开始/结束时间，因为我将它保存到用户的个人资料中，以防他们决定暂停游戏。我真正使用的唯一价值是它们的结束时间和开始时间之间的毫秒数。我现在有一个函数返回min：sec，但是我怎样才能使用setInterval刷新每秒？ – user1354934

@ user1354934 - 我编辑了答案。希望这会帮助你。你将需要填充零。 – PitaJ

谢谢！只是一个问题 - 我有一些麻烦，把它放入我的反应组件逻辑。基本上，我只是想让倒计时显示在我的'

{this.timer()}

'中，但不知道如何使用setInterval与：（ – user1354934

使用javascript制作min：sec计数器

回答

相关问题