JavaScript日期對象重置

Question

所以我有一點困難，找出一種方法讓我的計時器在我的番茄鍾計時器中每分鐘重置爲59秒。日期對象是否有一個內置的倒數計數方法？這裏是我的代碼：

'use strict'; 

//Visual representation of work/break times and counter 
let $workDisplay = $("#workNum"), 
    $breakDisplay = $("#breakNum"), 
    $workMinus = $(".workMinus"), 
    $workPlus = $(".workPlus"), 
    $breakMinus = $(".breakMinus"), 
    $breakPlus = $(".breakPlus"), 
    $counter = $("#counter"); 

//Initialize date object to work with functions (seven 0's to remove default local time) 
let time = new Date(0, 0, 0, 0, 0, 0, 0); 

let state = 'off'; 

//Set time dynamically 
let setTime = function(minutes, seconds) { 
    minutes = time.setMinutes(minutes); 
    seconds = time.setSeconds(seconds); 
    return { minutes: minutes, seconds: seconds } 
} 

//Default value for minutes and seconds (25) 
setTime(25 - 1, 59); 

let getMinutes = time.getMinutes(setTime.minutes); 
let getSeconds = time.getSeconds(setTime.seconds); 

$workDisplay.text(getMinutes); 
$counter.text(getMinutes); 

//Timer states 
let toggleTimer = function(newState) { 
    displayTime(); 

    if (state !== 'done') { 
     //The ? serves as a toggle (statement ? true value : false value) 
     state = newState || (state == 'on' ? 'off' : 'on'); 
    } 

    if (state == 'off') { 
     $counter.text(getMinutes + ":" + getSeconds); 
    } 
    console.log(state); 
} 

$counter.on('click',() => toggleTimer()); 

//Shrink these with an if statement later (check Dustin's DMs on Slack) 
$workMinus.on('click', function() { 
    getMinutes--; 
    console.clear(); 
    $workDisplay.text(getMinutes); 
    $counter.text(getMinutes); 
    console.log(getMinutes); 
}); 

$workPlus.on('click', function() { 
    getMinutes++; 
    console.clear(); 
    $workDisplay.text(getMinutes); 
    $counter.text(getMinutes); 
    console.log(getMinutes); 
}); 

//Count down seconds and minutes 
let countdownSecond = function() { 
    if (state == 'on') { 
     //Seconds stuff 
     getSeconds--; 
     $counter.text(getMinutes + ":" + getSeconds); 
    } 
} 

let countdownMinute = function() { 
    if (state == 'on') { 
     getMinutes--; 
     $counter.text(getMinutes + ":" + getSeconds); 
    } 
} 

//Update time display every minute/second 
function displayTime() { 
    window.setInterval(countdownSecond, 1000); 
    window.setInterval(countdownMinute, 60000) 
} 

console.log(state); 

目前，我的計時器下降到負面，而不是重新設置爲59秒新的一分鐘。事實上，它甚至從底片開始！任何提示，以幫助我的計時器正常運作，將不勝感激:)

Answer 1

如果你正在創建一個倒數計時器，只關心時間，使用日期和當前時間的日期，不要嘗試使用日期本身爲櫃檯。

所以，如果你想倒計時每天5分鐘：

1. 創建的起始日期對象（這是你的時代）
2. 轉換的時間間隔，以秒（300）
3. 呼叫的setTimeout約每秒（調整爲實際經過的時間）
4. 定時器功能應該通過創建一個新的日期
5. 獲取ELA獲取當前時間psed時間作爲消逝的時間或剩餘時間
6. 停止時到達零或間隔（如果遞增計數）

有很多倒計時定時器的歷元和當前時間

格式之間的差異在這裏，我確信你可以找到適合的人。

這裏有一個顯示算法：

var countDown = (function() { 
 
    var epoch, limitMs, element; 
 
    
 
    // Return seconds formatted as m:ss 
 
    function toMins(secs) { 
 
    return (secs/60|0) + ':' + ('0'+secs%60).slice(-2) 
 
    } 
 
    
 
    return function(secs, id) { 
 

 
    // If first call, set epoch and limit 
 
    if (!epoch) { 
 
\t epoch = new Date().getTime(); 
 
\t limitMs = secs * 1000; 
 
\t element = document.getElementById(id); 
 
\t } 
 
    
 
    // Get current time 
 
    var now = new Date(); 
 
    
 
    // Get difference in seconds 
 
    var diff = now - epoch; 
 
\t 
 
\t // Get time remaining in whole seconds 
 
\t var remainSecs = Math.round((limitMs - diff)/1000); 
 
\t 
 
\t // Set time to next call, as close to next whole second as possible 
 
\t var lag = 1000 - (diff%1000); 
 

 
\t // Set default display 
 
    var displayMins = '0:00'; 
 
    
 
    // If haven't reached the end, set the value to display and call again 
 
    if (diff < limitMs) { 
 
     displayMins = toMins(remainSecs); 
 
\t setTimeout(countDown, lag); 
 
    } 
 
    element.textContent = displayMins; 
 
    } 
 
}()); 
 

 

 
countDown(150,'minsDisplay');

<div id="minsDisplay"></div>