使用可以轻松重置的代码制作计时器答案

【问题标题】：Making a timer with code that can easily be reset使用可以轻松重置的代码制作计时器
【发布时间】：2016-02-11 03:12:49
【问题描述】：

我正在为学校的篮球队制作投篮时钟。射击时钟是从 24 秒开始倒计时的计时器。我现在有计时器的骨架，但我需要有特定的键绑定。键绑定应该允许我休息、暂停和播放计时器。

var count=24;

var counter=setInterval(timer, 1000);

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs";
}

【问题讨论】：

jquerytimer.com

标签： javascript timer key-bindings stopwatch

【解决方案1】：

我不确定您所说的“休息”计时器是什么意思，我将其解释为“暂停”，所以：

空格 = 暂停/播放。
R = 重置。

var
  count=24,
  counter = setInterval(timer, 1000),
  running = true;

function timer() {
  count -= 1;
  
  if (count <= 0) {
    clearInterval(counter);
  }
  
  document.getElementById("timer").innerHTML = count + " secs";
}

window.addEventListener("keydown", function(e) {
  switch(e.keyCode) {
  
    case 32: // PLAY
      running ? clearInterval(counter) : counter = setInterval(timer, 1000);
      running = !running;
      break;
    
    case 82: // RESET
      clearInterval(counter);
      document.getElementById("timer").innerHTML = 24 + " secs";
      count = 24;
      running = false;
  }
});

&lt;div id="timer"&gt;24 secs&lt;/div&gt;

【讨论】：

我认为他的重置是指在任何给定时间计时器将重置回 24 秒。
他写的是“rest”，而不是reset。无论如何，我已经接受了重置。
e.keyCode 已弃用。应该改用e.key 或e.code，这也使代码更容易理解。请记住，一些旧浏览器使用非标准代码，例如，左边通常是 'LeftArrow'，右边是 'RightArrow'，但在 IE 上它只是 'Left' 和 'Right'。另外，请查看keyjs.dev。我将很快添加有关这些跨浏览器不兼容性的信息！ ?

【解决方案2】：

我还不能发表评论，但我建议查看这篇文章Binding arrow keys in JS/jQuery

链接的帖子解释了如何使用 js/jquery 绑定箭头键。使用http://keycode.info/，您可以找到所需键的键码并替换当前值，然后继续从那里构建您的代码。

【讨论】：

【解决方案3】：

这是我的代码示例：http://codepen.io/anon/pen/vLvWJM

$(document).ready(function() {
  var $timer = $('#timer');
  var $timerStatus = $('#timerStatus');
  var timerValue = 24;
  var intervalId = null;
  var timerStatus = 'stopped';
  
  if(!$timer.length) {
    throw 'This timer is missing a <div> element.';
  }
  
  $(document).keydown(function(k) {
    if(k.which == 80) {
      if(timerStatus === 'playing') {
        clearInterval(intervalId);
        timerStatus = 'stopped';
        updateTimerStatus();
        return;
      }
      
      intervalId = setInterval(function() {
        playTimer();
        timerStatus = 'playing';
        updateTimerStatus();
      }, 1000);
    } else if(k.which == 82) {
      clearInterval(intervalId);
      resetTimer();                              
      updateText();
      timerStatus = 'stopped';
      updateTimerStatus();
    }
  });
  
  function playTimer() {
    if(timerValue > 0) {
      timerValue--;
      updateText();
    }
  }
  
  function resetTimer() {
    timerValue = 24;
  }
  
  function updateText() {
    $timer.html(timerValue);
  }
  
  function updateTimerStatus() {
    $timerStatus.html(timerStatus);
  }
});

<div id="timerStatus">stopped</div>
<div id="timer">24</div>

【讨论】：