Javascript countdown timer not working correctly

Question

I'm creating a javascript function to countdown a user selected value. This is my code so far.

function countdownTimeStart() {
  var time = document.getElementById("test").value;
  time = time.split(':');
  var date = new Date();
  var countDownDate = date.setHours(time[0], time[1], time[2]);
  var x = setInterval(function () {
    // Get to days date and time
    var now = new Date().getTime();

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

    // Time calculations for days, hours, minutes and seconds
    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("demo1").innerHTML = hours + ": "
      + minutes + ": " + seconds + " ";

    // If the count down is over, write some text
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo1").innerHTML = "00:00:00";
    }
  }, 200);
}
document.querySelector("button").addEventListener(
  "click",
  countdownTimeStart
)

<input type = "test" id = "test" value="20:12:40">
<div id="demo1"></div>
<button>start</button>

The problem is countdown is not working properly. The count down time start from another time instead of start from 20:12:40 which comes from input tag.

Please help me to solve this.

I updated the code and can not see the problem, put in a time that's higher than current time and the countdown works. Lover than current time will result in no countdown (goes to all zeros). — HMR, Apr 27 '18 at 16:27

JstnPwll · Answer 1 · 2018-04-27T16:45:41.377

1

Just set the countDownDate to the current time plus the number of hours, minutes, and seconds into the future you require.

var countDownDate = new Date( date.getTime() 
                            + parseInt(time[0])*(1000 * 60 * 60) //hours
                            + parseInt(time[1])*(1000 * 60) //minutes
                            + parseInt(time[2])*1000 ); //seconds

edited Apr 27 '18 at 16:45

answered Apr 27 '18 at 16:27

JstnPwll

8,585
2
33
56

Michael Andorfer · Accepted Answer · 2018-04-27T16:50:13.167

if you would like to count down a given time the following should work:

var time = document.getElementById("test").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0], time[1], time[2]);

function countdownTimeStart() {
  var x = setInterval(function () {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;
    
    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
     time[1]--;
        time[2] = 59
    }
    
    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
     time[0]--;
        time[1] = 59
    }

    // Output the result in an element with id="demo"
    // add leading zero for seconds if seconds lower than 10
    if (seconds < 10) {
        document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
        document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }
  }, 1000);
}

document.querySelector("button").addEventListener(
  "click",
  countdownTimeStart
)

<input type = "text" id = "test" value="20:00:01">
<div id="demo"></div>
<button>start</button>

this script counting the value through the minus value too. So how can I stop the counting when 00:00:00. Could you please help me. — Chathuri Fernando, May 01 '18 at 06:15
@ChathuriFernando see this post https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript — Michael Andorfer, May 07 '18 at 18:22

Javascript countdown timer not working correctly

2 Answers2