Making a timer with code that can easily be reset

Question

I'm making a shot clock for my school's basketball team. A shot clock is a timer that counts down from 24 seconds. I have the skeleton for the timer right now, but I need to have particular key bindings. The key bindings should allow me to rest, pause, and play the timer.

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";
}

score 1 · Accepted Answer · edited Sep 27 '20 at 16:45

1

I'm not sure what you meant by "rest" the timer, I interpret this as "pause", so:

Space = Pause / Play.
R = Reset.

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>

edited Sep 27 '20 at 16:45

Danziger

19,628
4
53
83

answered Feb 11 '16 at 03:34

sudo

323
3
12

I think by reset he means at any given time the timer will reset back to 24 seconds. – dchayka Feb 11 '16 at 03:37
He wrote "rest" though, not reset. I've accommodated reset anyhow. – sudo Feb 11 '16 at 03:38
`e.keyCode` is deprecated. `e.key` or `e.code` should be used instead, which also makes the code easier to understand. Just keep in mind some old browsers used non-standard codes, so ,for example, left is usually `'LeftArrow'` and right is `'RightArrow'`, but on IE it's just `'Left'` and `'Right'` instead. Also, take a look at https://keyjs.dev. I will add information about these kinds of cross-browser incompatibilities soon! – Danziger Sep 27 '20 at 16:42

score 0 · Answer 2 · answered Feb 11 '16 at 03:22

I am not able to comment yet, but I recommend checking out this post Binding arrow keys in JS/jQuery

The linked post explains how to bind arrow keys using js/jquery. Using http://keycode.info/ you can find out the keycodes of your desired keys and replace the current values then continue to build your code from there.

dchayka · Answer 3 · 2016-02-11T15:16:01.947

Here is my code sample: 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

3 Answers3