CODEWITHSUNDEEP
javascripttimer
jso1226
jso1226

Reputation: 59

How to get the timer start counting down using javascript?

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>

Upvotes: 0

Views: 2674

Answers (4)

CodingEra
CodingEra

Reputation: 1807

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);

Upvotes: 1

Edwinfad
Edwinfad

Reputation: 535

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>

Upvotes: 0

loxxy
loxxy

Reputation: 13151

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>

Upvotes: 0

Natural Lam
Natural Lam

Reputation: 742

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/

Upvotes: 0

Related Questions