JS计数定时器

Question

我正在尝试创建一个简单的JS倒计时器。计时器--不起作用了。

​

function setTimer() {
  var x = parseInt(document.getElementById("input").value);
  var timer = Math.floor(x * 60);
  var mins = Math.floor(timer / 60);
  var secs = Math.floor(timer % 60);
  var text =
    document.getElementById("output");
  text.innerHTML = mins + " : " +
    secs;
  timer--;
  setTimeout('setTimer()', 1000);
}

<input type="text" id="input">
<button id="btn" onClick="setTimer()"> Start </button>

​

计时器没有减少。你能帮忙吗？

Answer 1

您的timer变量没有改变，因为它再次从输入中获取值。我在下面简化了你的代码

<html>
    <script>
        var timer;
        function setTimer() {
            var x = parseInt(document.getElementById("input").value);
            timer = Math.floor(x * 60);

            handleTimer(timer);
        }

        function handleTimer(timer) {
            var mins = Math.floor(timer / 60);
            var secs = Math.floor(timer % 60);
            document.getElementById("output").value = mins + " : " + secs;
            timer--;
            setTimeout(function () {
                handleTimer(timer);
            }, 1000);
        }
    </script>
    <input type="text" id="input" placeholder="input" />
    <input type="text" id="output" placeholder="output" />
    <button id="btn" onClick="setTimer()">Start</button>
</html>