使用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計數器

回答

相關問題