How to get the timer start counting down using javascript?

Question

I am trying to make a timer start counting down. I think my next step is to make the countdown function to actually work. What would be the best approach for this?

JavaScript and HTML codes below:

// Set the default timer as 25:00
var timer = document.getElementById("mytime");
var counter = setInterval(function(){
  countdown()}, 1000);
//user clicks the 'start' button and timer starts counting down

function countdown(minutes, seconds){ 
  timer.value = "17:30:00"; //default value
  document.getElementById("btn").innterHTML = counter;
  counter--;
};


var click = document.getElementById("btn");
btn.addEventListener("click", countdown); //"click" as DOM Object?
btn.addEventListener("click", stopcounting);

<head> 
  <title>Pomodoro Timer</title>
</head>

<body>
  <h1>POMODORO TIMER</h1>
    <div id="main">
      <input type="time" id="mytime">
        <button id="btn"> start </button>
      </div>
</body>

why would you create your own timer if there is a jQuery package that you can use, dont re-invent the wheel. see this link: http://hilios.github.io/jQuery.countdown/ — sameh.q
– sameh.q, Commented Dec 2, 2015 at 7:39
@jso1226 its clear you have no idea what you are doing. stack overflow is not a place for posers to get free work. — r3wt
– r3wt, Commented Dec 2, 2015 at 21:53
@r3wt I did my research before asking and I clearly don't know what I'm doing so I needed help. — jso1226
– jso1226, Commented Dec 2, 2015 at 23:21

shuberman · Accepted Answer · 2020-06-29 15:42:55Z

1

This is my own version of the clock where you can start the timer by adding the specific time when the event happened. Please see the below code.

// Set the date we're counting down to
var start_at = new Date('2020-06-29 12:00:00');

// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date();

// Find the distance between now an the count down date
var distance = now - start_at;


// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").value = hours + "h "
+ minutes + "m " + seconds + "s ";

}, 1000);

edited Jun 29, 2020 at 15:42

shuberman

1,4887 gold badges23 silver badges42 bronze badges

answered Jun 29, 2020 at 7:16

CodingEra

1,88716 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shuberman Over a year ago

Thank you for helping out our community patron. Make sure you do not include unnecessary formatting unless required. For more help refer this thread: stackoverflow.com/help/formatting

Natural Lam · Accepted Answer · 2015-12-02 07:07:55Z

This may be what you want, I haven't done it in the date time format but you can pretty much convert that by yourself.

<head>
  <title>Pomodoro Timer</title>
</head>
<body>
  <h1>POMODORO TIMER</h1>
    <div id="main">
      <input id="mytime" value=1000>
        <button id="btn"> start </button>        
      </div>
</body>
<script>
  var input = document.getElementById("mytime");
  var button = document.getElementById("btn");
  var started = false;
  var timer;
  var startTimer = function (count) {
    return setInterval(function () {
      input.setAttribute("value", --count);
    }, 1000);
  }
  button.addEventListener("click", function () {
    if (!started) {
      var count = parseInt(input.getAttribute("value"));
      timer = startTimer(count);
      started = true;
      button.innerHTML = "stop";
    } else {
      clearInterval(timer);
      started = false;
      button.innerHTML = "start";
    }
  });
</script>

JSFiddler: https://jsfiddle.net/m7pev0vm/

loxxy · Accepted Answer · 2015-12-02 07:25:03Z

Your code is a bit jumbled. So let me help you sort it out.

First off, the click function needs to trigger a the start of countdown.

The counter in the timer function would need to be something in seconds. So that you can keep decrementing the value while on the face of it, it would be in hours, minutes & seconds.

Also, You need to have a target time. So if I say counter until 00:00:00 then the following could work, as an example :

// Set the default timer as 5:30 PM
var timer = document.getElementById("mytime");
var counter = (17*60*60) + (30*60);
timer.value = "17:30:00"; //default value

function countdown(minutes, seconds){ 
  --counter;
  var hrs = Math.floor(counter / 3600),
      min = Math.floor((counter % 3600) / 60),
      sec = Math.floor((counter % 3600) % 60);
  
  timer.value = hrs + ":" + min + ":" + sec;
};

function onClick() {
    var counter = setInterval(function(){
        countdown();
    }, 1000);
    //user clicks the 'start' button and timer starts counting down
}

var click = document.getElementById("btn");
btn.addEventListener("click", onClick); //"click" as DOM Object?
btn.addEventListener("click", stopcounting);

<head> 
  <title>Pomodoro Timer</title>
</head>

<body>
  <h1>POMODORO TIMER</h1>
    <div id="main">
      <input type="time" id="mytime">
        <button id="btn"> start </button>
      </div>
</body>

Edwinfad · Accepted Answer · 2017-09-18 14:28:32Z

I know this is coming very late but I know it will help someone someday.

<!DOCTYPE HTML>
<html>
<head>


</head>
<body>

<form>
   
  <input type="text" name="demo" id="demo" size="20"  readonly="true" style="text-align:center;"/>
  <br>
 
</form> 


<script>
// Set the date we're counting down to
var countDownDate = new Date().getTime() + ((1)*60*60*1000);

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
	
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").value = hours + "h "
    + minutes + "m " + seconds + "s ";
    
	
	// If the count down remains 15 minutes, write some text
	 
if (minutes == 59 && seconds == 1) {
        alert("Hello! 1 minute gone");
    }
     
    
    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo");
        demo.value= "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

Collectives™ on Stack Overflow

How to get the timer start counting down using javascript?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related