creating a countdown timer in javascript with automatic reload

Question

Three problems, my start button starts more than one timer at the same time instead of only once for multiple clicks to start. Second, my stop button doesn't work. and my reset button, changes the text but doesnt stop the timer. Here's my code:

function stopTimer(timer) {
  clearInterval(timer);
}

function resetTimer(duration, display) {
  var timer = duration,
    minutes, seconds;

  minutes = parseInt(timer / 60, 10);
  seconds = parseInt(timer % 60, 10);

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = minutes + ":" + seconds;
}


function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;

    // Beep when counter reaches zero
    if (--timer < 0) {
      timer = duration;
      var context = new AudioContext();
      var oscillator = context.createOscillator();
      oscillator.type = "sine";
      oscillator.frequency.value = 800;
      oscillator.connect(context.destination);
      oscillator.start();
      setTimeout(function() {
        oscillator.stop();
      }, 100);
    }
  }, 1000);
}

var time_in_seconds = 5;
display = document.querySelector('#time');

document.getElementById("start").addEventListener("click", function() {
  startTimer(time_in_seconds, display);
});

document.getElementById("stop").addEventListener("click", function() {
  stopTimer(timer);
});

document.getElementById("reset").addEventListener("click", function() {
  resetTimer(time_in_seconds, display);
});

<html>

<body>
  <div id="time">00:10</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
  <script>
  </script>
</body>

</html>

Take a closer look at the documentation for setInterval() and clearInterval(). You need to save the intervalID from setInterval() to do anything with that timer. — DaveG
– DaveG, Commented Apr 17, 2022 at 17:43

Lee Taylor · Accepted Answer · 2022-04-18 13:18:01Z

var duration = 5;
var timer_id = null;
var timer_seconds = duration;
var timer_active = 0;
var display = document.querySelector('#time');

function BeepOnce() {
  timer_seconds = duration;

  var context = new AudioContext();
  var oscillator = context.createOscillator();

  oscillator.type = "sine";
  oscillator.frequency.value = 800;
  oscillator.connect(context.destination);
  oscillator.start();
  setTimeout(function() {
    oscillator.stop();
  }, 100);
}

function UpdateDisplay() {
  var minutes = parseInt(timer_seconds / 60, 10);
  var seconds = parseInt(timer_seconds % 60, 10);

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = minutes + ":" + seconds;
}

function TimerReset() {
  timer_seconds = duration;
  timer_active = 1;
  UpdateDisplay();
}

function TimerStart() {
  timer_seconds = duration;
  timer_active = 1;
  UpdateDisplay();
}

function TimerStop() {
  timer_active = 0;
  /*clearInterval(timer_id);*/
}

function TimerInit() {
  UpdateDisplay();

  var fun1 = function() {
    if (timer_active) {
      // Beep at Zero Seconds
      if (--timer_seconds < 0) {
        BeepOnce();
        TimerReset();
      }
      // Countdown
      else {
        UpdateDisplay();
      }
    }
  }

  //called timer every second
  timer_id = setInterval(fun1, 1000);
}

TimerInit();


document.getElementById("start").addEventListener("click", function() {
  TimerStart();
});

document.getElementById("stop").addEventListener("click", function() {
  TimerStop();
});

document.getElementById("reset").addEventListener("click", function() {
  TimerReset();
});

<html>

<body>
  <div id="time">00:10</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button></body>

</html>

Collectives™ on Stack Overflow

creating a countdown timer in javascript with automatic reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related