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分钟：

为开始创建日期对象（这是您的纪元）
将时间间隔转换为秒（300）
大约每秒呼叫 setTimeout （根据实际经过的时间进行调整）
计时器功能应通过创建新日期来获取当前时间
获取经过时间作为纪元与当前时间之间的差异
格式化为已用时间或剩余时间
当您达到零或间隔（如果向上计数）时停止

这里有很多倒数计时器，我相信你能找到适合的人。

以下是显示算法的方法：

＆＃13;

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) {
	  epoch = new Date().getTime();
	  limitMs = secs * 1000;
	  element = document.getElementById(id);
	}
  
    // Get current time
    var now = new Date();
  
    // Get difference in seconds
    var diff = now - epoch;
	
	// Get time remaining in whole seconds
	var remainSecs = Math.round((limitMs - diff)/1000);
	
	// Set time to next call, as close to next whole second as possible
	var lag = 1000 - (diff%1000);

	// 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);
	  setTimeout(countDown, lag);
    }
    element.textContent = displayMins;
  }
}());


countDown(150,'minsDisplay');

＆＃13;

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

＆＃13;

JavaScript日期对象重置

1 个答案: