CODEWITHSUNDEEP
javascripthtmltimer
Chris Holt
Chris Holt

Reputation: 33

Countdown timer that responds to my commands

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?

Upvotes: 3

Views: 251

Answers (3)

robbmj
robbmj

Reputation: 16526

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>

Upvotes: 0

Adarsh Mohan
Adarsh Mohan

Reputation: 1394

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>

Upvotes: 1

Spaceman
Spaceman

Reputation: 1339

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>

Upvotes: 2

Related Questions