响应我的命令的倒数计时器答案

【问题标题】：Countdown timer that responds to my commands响应我的命令的倒数计时器
【发布时间】：2016-02-18 08:19:13
【问题描述】：

我正在尝试在 JavaScript 中创建一个倒数计时器，特别是我可以设置为一两分钟以及它何时开始的倒数计时器。

这是我从头开始就能完成的，但我似乎无法让它发挥作用：

var tim = 90
var min = (tim / 60) >> 0;
var sec = tim % 60;
function set1() {
    tim=60;
}
function set2() {
    tim=120;
}
function start() { function{ setInterval(function(){ tim-1; }, 1000);
}
function display() {

document.getElementById("demo").innerHTML = min + ":" + sec ;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body onload="display()">


<p id="demo"></p>
<button onclick="set1()"> set one minute</button>
<button onclick="set2()"> set two minute</button>
<button onclick="start()"> start </button>
</body>
</html>

我也尝试从here, 调整以下解决方案，但是无济于事。

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds; 

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // we don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>

我在这里错过了什么？

【问题讨论】：

需要注意的一点是，您的函数中有tim-1;，您将其传递给setInterval。您正在评估表达式，但您没有对结果做任何事情。你可能打算做tim = tim-1;

标签： javascript html timer

【解决方案1】：

这是一种解决方案。基本上你只画一次时间。每次更新时都需要绘制它。

您还遇到了一些问题，即在设置的时间间隔内您再也没有分配变量 tim。

var timeLeft = 90

function set1() {
    timeLeft=60;
    display();
}

function set2() {
    timeLeft=120;
    display();
}

function start() {
   setInterval(function(){ 
       timeLeft = timeLeft -1; 
       display();
   }, 1000);
}

function display() {
    var min = (timeLeft / 60) >> 0;
    var sec = timeLeft % 60;
    document.getElementById("demo").innerHTML = min + ":" + sec ;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body onload="display()">


<p id="demo"></p>
<button onclick="set1()"> set one minute</button>
<button onclick="set2()"> set two minute</button>
<button onclick="start()"> start </button>
</body>
</html>

【讨论】：

作为旁注，这里仍然存在一些问题，因为计时器可能会变为负数，并且个位数的秒数看起来很奇怪，但这不是问题，所以我没有解决这个问题：P。跨度>
没关系，我只是为否定添加了一个 if 语句，单个数字没问题
@ChrisHolt 我的回答有什么遗漏吗？ :)

【解决方案2】：

一个更简单的..

var TimerTime;
function startTimer(timerVal){
	clearInterval(TimerTime); //Only if you need to change the time
	var MIN = timerVal/60;
	var SEC = timerVal%60;
	TimerTime = setInterval(function(){
		SEC--;
		if(SEC<0){MIN--;SEC = 59;}
		if(MIN<0){clearInterval(TimerTime)}	
		else{
			document.getElementById("timerDisplay").innerHTML = MIN+" : "+SEC+" remaining...";
		}
	},1000);
}
window.onload = startTimer(60);

<select onchange="startTimer(this.value)">
  <option value="">Select Time</option>
  <option value="60">1 Minute</option>
  <option value="120">2 Minuts</option>
</select>
<div id="timerDisplay"></div>

【讨论】：

【解决方案3】：

好吧，既然您试图从另一篇文章中的代码调整解决方案，我也可以向您展示如何做到这一点。

function startTimer(duration, display) {
  var start = Date.now(), diff;

  (function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);

    if (diff >= 0) {
      display(diff);
      setTimeout(timer, 1000);
    }
  }());
}

window.onload = function() {
  var element = document.querySelector('#time'),
      started = false;

  function display(diff) {
    var minutes = (diff / 60) | 0,
        seconds = (diff % 60) | 0;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    element.innerHTML = minutes + ":" + seconds;
  }

  function handleClick(duration) {
    return function() {
      if (!started) {
        started = true;
        startTimer(duration, display);
      }
    };
  }

  function attachHandler(id, duration) {
    var ftn = handleClick(duration);
    document.getElementById(id).addEventListener('click', ftn);
  }

  attachHandler('one-minute', 60);
  attachHandler('two-minute', 120);
};

<body>
  <button id="one-minute">1 Minute</button>
  <button id="two-minute">2 Minutes</button>
  <span id="time"></span>
</body>

【讨论】：