编写定时器[关闭]答案

【问题标题】：Programming a timer [closed]编写定时器[关闭]
【发布时间】：2015-09-08 13:42:41
【问题描述】：

所以，我想创建一个计时器，这是我目前的代码。

<!DOCTYPE html>

<html>

<head>

  <title>WIP</title>
  <meta charset="UFT-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script>
    function timerCreate(minutes, seconds) {
      var i = 0;
      var f = 0;
      $("#timerText").text((minutes - f) + ":" + (seconds - i));
      i++;
      do {
        interval = setInterval(function() {
          $("#timerText").text((minutes - f) + ":" + (seconds - i));
          i++;
          if (i >= seconds) {
            clearInterval(interval);
            setTimeout(function() {
              $("#timerText").text((minutes - f) + ":" + "0");
            }, 1000);
            if (minutes > 0) {
              f++;
            }
          }
        }, 1000);
      } while (!(f = minutes));
    }
  </script>

</head>

<body onload='timerCreate(5, 4)'>

  <div id="timerText">Timer</div>

</body>

</html>

请运行代码以查看其作用。我不明白它为什么这样做。有人可以帮忙吗？此外，虽然我觉得我最终会得到它，但在我看来，这段代码似乎无处不在。如果您同意，如果您能将我链接到一些计时器代码，我将不胜感激。不管怎样，如果你能向我解释我做错了什么，我真的很高兴。

非常感谢任何回答的人。 :-)

【问题讨论】：

你想要重新排列你的代码还是可以使用一些类似的代码，例如这个：stackoverflow.com/questions/532553/javascript-countdown
我觉得这很好，谢谢。
您的意思是while (!(f == minutes)) 而不是while (!(f = minutes))？
但如果您愿意，您可以重新排列代码，因为我想了解问题所在。
@HPierce 是的，当然，noobie 错误 :-) 我会测试它

标签： javascript jquery html time timer

【解决方案1】：

这显然是递归函数的工作。首先你需要 timerCreate(5, 4)。
接下来会发生什么，1 秒后您可以调用 timerCreate(5, 3)。
所以很明显让函数调用自己（=递归函数），每次少1秒。

请注意模运算符 % 与 / 运算符。 % 的作用是告诉你除法后还剩下什么。

示例：

91 / 60 = 1 + 31/60
Math.floor(91/60) = 1;
91%60 = 31;

所以分隔和铺地板给你分钟；模数为您提供秒数。

这是我刚刚写的东西，基于我对这个问题的第一直觉（没有查看其他计时器；显然有很多计时器可以在网上找到）。

<input id="m" placeholder="minutes" value="1">
<input id="s" placeholder="seconds" value="17">
<input type="button" value="Start" onclick="startTimer()">
<input type="button" value="Stop" onclick="stopTimer()">
<hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var timer;
function displayTimer(m, s) {
  $('#m').val(m);
  $('#s').val(s);
}

function stopTimer() {
  clearTimeout(timer);
}

function startTimer() {
  var m = Number($('#m').val());
  var s = Number($('#s').val());
  timerClick(m, s);
}

function finishTimer() {
  alert('finished!');
}

function timerClick(m, s) {
  // convert into seconds
  var seconds = 60*m + s;
  // display timer, unless the timer has been set off
  if(timer) {
    displayTimer(m, s);
  }
  if (m == 0 && s == 0) {
    finishTimer();
    return true;
  } 
  // remove one second
  seconds--;
  // call this function again
  timer = setTimeout(function() {
      timerClick(Math.floor(seconds / 60), seconds % 60);
    },
    1000
  );
}
</script>

【讨论】：

Emmanuel，请尝试解释一下您在新代码中做了什么。没有任何解释，你的回答不是很有帮助。
尽管我喜欢你的解决方案，但显然每次迭代都有一些延迟。
是的；每次迭代的延迟在我的代码中都没有得到补偿。所以我希望我的计时器运行得有点慢。

【解决方案2】：

这是您的代码示例：

HTML：

<div id="timerText">Timer</div>

JavaScript 代码：

var timerElement = $('#timerText');

function timerCreate(minutes, seconds) {
    var finalTimerTime = getFinalTime(minutes, seconds);

    // starts run timer every second and gets handler to the timer, so it can be stopped when time gets
    // final time
    var timer = setInterval(function () {
        var currentTime = new Date();
        if (currentTime > finalTimerTime) {
            clearInterval(timer);
            console.log('Done');
        } else {
            printTimer(new Date(finalTimerTime - currentTime));
        }
    }, 1000);

    printTimer(new Date(finalTimerTime - new Date()));
}

// prints timer valud
function printTimer(finalTimerTime) {
    timerElement.text(finalTimerTime.getMinutes().timePadding() + ' : ' + finalTimerTime.getSeconds().timePadding());
}

// adds leading prefix for presenting time in '0X' format
Number.prototype.timePadding = function() {
    return this < 10 ? '0' + this : this;
}

// gets final time of the timer
function getFinalTime(minutes, seconds) {
    var finalTimerTime = new Date();
    finalTimerTime.setMinutes(finalTimerTime.getMinutes() + minutes);
    finalTimerTime.setSeconds(finalTimerTime.getSeconds() + seconds);

    return finalTimerTime;
}

// starts timer
$(function () {
    timerCreate(5, 4);
});

Here is an working example of the code

【讨论】：

这很有创意，但时间看起来有点奇怪，比如 1:09，因为 finalTimerTime.getSeconds() 返回时返回的是 9 而不是 09。从而使输出1:9.
@HPierce。我添加了处理前导“0”的 timePadding 函数。