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

Question

我正在为我学校的篮球队制作一个进攻时钟。进攻时钟是从 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";
}

Answer 1

我还不能发表评论，但我建议你看看这个 post Binding arrow keys in JS/jQuery

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

Answer 2

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

Space = 暂停/播放。
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;
  }
});

<div id="timer">24 secs</div>

Answer 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>

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

Making a timer with code that can easily be reset

javascript

timer

stopwatch

key-bindings