Countdown timer that responds to my commands

Question

I'm trying to make a countdown timer in JavaScript, specifically one that I can set to either one or two minutes, as well as when it starts.

This is what I've been able to accomplish from scratch, but I can't seem to get it to work:

var tim = 90
var min = (tim / 60) >> 0;
var sec = tim % 60;
function set1() {
    tim=60;
}
function set2() {
    tim=120;
}
function start() { function{ setInterval(function(){ tim-1; }, 1000);
}
function display() {

document.getElementById("demo").innerHTML = min + ":" + sec ;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body onload="display()">


<p id="demo"></p>
<button onclick="set1()"> set one minute</button>
<button onclick="set2()"> set two minute</button>
<button onclick="start()"> start </button>
</body>
</html>

I've also tried adapting the following solution from here, but to no avail.

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

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

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

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // we don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>

What am I missing here?

One thing to note is that you have `tim-1;` in your function that you pass to `setInterval`. You are evaluating the expression, but you aren't doing anything with the result. You probably meant to do `tim = tim-1;` — Saad, Nov 18 '15 at 01:29

Spaceman · Answer 1 · 2015-11-17T04:10:07.580

2

Here is one solution. Essentially you where only drawing the time once. You need to draw it every time it updates.

You also had some issues in that in the set interval you never assigned the variable tim again.

var timeLeft = 90

function set1() {
    timeLeft=60;
    display();
}

function set2() {
    timeLeft=120;
    display();
}

function start() {
   setInterval(function(){ 
       timeLeft = timeLeft -1; 
       display();
   }, 1000);
}

function display() {
    var min = (timeLeft / 60) >> 0;
    var sec = timeLeft % 60;
    document.getElementById("demo").innerHTML = min + ":" + sec ;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body onload="display()">


<p id="demo"></p>
<button onclick="set1()"> set one minute</button>
<button onclick="set2()"> set two minute</button>
<button onclick="start()"> start </button>
</body>
</html>

edited Nov 17 '15 at 04:10

answered Nov 17 '15 at 04:00

Spaceman

1,319
13
42

As a side note there are still some issues here in that the timer can go negative and single digit seconds look weird but that wasn't the question so I didn't fix that :P. – Spaceman Nov 17 '15 at 04:16
thats fine, i just added an if statement for the negatives, and single digits is fine – Chris Holt Nov 17 '15 at 05:07
@ChrisHolt is there anything missing from my answer ? :) – Spaceman Nov 17 '15 at 05:08

score 1 · Accepted Answer · answered Nov 17 '15 at 06:43

A more simple one..

var TimerTime;
function startTimer(timerVal){
 clearInterval(TimerTime); //Only if you need to change the time
 var MIN = timerVal/60;
 var SEC = timerVal%60;
 TimerTime = setInterval(function(){
  SEC--;
  if(SEC<0){MIN--;SEC = 59;}
  if(MIN<0){clearInterval(TimerTime)} 
  else{
   document.getElementById("timerDisplay").innerHTML = MIN+" : "+SEC+" remaining...";
  }
 },1000);
}
window.onload = startTimer(60);

<select onchange="startTimer(this.value)">
  <option value="">Select Time</option>
  <option value="60">1 Minute</option>
  <option value="120">2 Minuts</option>
</select>
<div id="timerDisplay"></div>

robbmj · Answer 3 · 2015-11-18T23:13:39.240

Well since you were trying to adapt a solution from code in another post I can show you how to do that too.

function startTimer(duration, display) {
  var start = Date.now(), diff;

  (function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);

    if (diff >= 0) {
      display(diff);
      setTimeout(timer, 1000);
    }
  }());
}

window.onload = function() {
  var element = document.querySelector('#time'),
      started = false;

  function display(diff) {
    var minutes = (diff / 60) | 0,
        seconds = (diff % 60) | 0;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    element.innerHTML = minutes + ":" + seconds;
  }

  function handleClick(duration) {
    return function() {
      if (!started) {
        started = true;
        startTimer(duration, display);
      }
    };
  }

  function attachHandler(id, duration) {
    var ftn = handleClick(duration);
    document.getElementById(id).addEventListener('click', ftn);
  }

  attachHandler('one-minute', 60);
  attachHandler('two-minute', 120);
};

<body>
  <button id="one-minute">1 Minute</button>
  <button id="two-minute">2 Minutes</button>
  <span id="time"></span>
</body>

Countdown timer that responds to my commands

3 Answers3