JS Countdown script

JayDz · September 3, 2015

Hello Everyone!
Im using this countdown script but its not using timezones, so for everyone is shows another time.
I want it to countdown from UTC time

scootstah · September 3, 2015

Can you post some code please?

JayDz · September 3, 2015

Can you post some code please?

setInterval(function () {
    function addZero(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    var d = new Date();
    var m = (d.getMinutes());
    var h = (d.getHours());
    var x = document.getElementById("timer")


    if (h >= 24) {
        h -= 24;
    }


    h = (23 - h);
    m = (59 - m);


    t = h + ":" + addZero(m);


    x.innerHTML = (t);


}, 250);

Sorry forgot that!

scootstah · September 3, 2015

You can use getUTCMinutes() and getUTCHours() to ignore local time settings.

What is the purpose of this logic? Because it produces incorrect time:

if (h >= 24) {
    h -= 24;
}


h = (23 - h);
m = (59 - m);

JayDz · September 3, 2015

You can use getUTCMinutes() and getUTCHours() to ignore local time settings.

What is the purpose of this logic? Because it produces incorrect time:
if (h >= 24) {
    h -= 24;
}


h = (23 - h);
m = (59 - m);

I dont know javascript so I dont know how to make it like that, someone else made me this script.

Got an idea how i can implement this? the timer does work correctly, 24 hours but just timezone :/

scootstah · September 3, 2015

Replace

var m = (d.getMinutes());

var h = (d.getHours());

With

var m = (d.getUTCMinutes());

var h = (d.getUTCHours());

JayDz · September 3, 2015

Replace

var m = (d.getMinutes());
var h = (d.getHours());

With

var m = (d.getUTCMinutes());
var h = (d.getUTCHours());

That doesnt work, i live in GMT +2 // when my countdown should say 3 hours it says 10 hours when im using urs

But it says 3 hours when im using mine

scootstah · September 3, 2015

Yeah, that's why I said that extra logic was causing an incorrect time.

Remove this:

if (h >= 24) {
    h -= 24;
}


h = (23 - h);
m = (59 - m);

JayDz · September 6, 2015

Yeah, that's why I said that extra logic was causing an incorrect time.

Remove this:
if (h >= 24) {
    h -= 24;
}


h = (23 - h);
m = (59 - m);

that doesnt seem to work, when i delete ur part is completely stops working.

with this script it shows different countdown time, not all the same..

setInterval(function () {
    function addZero(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    var d = new Date();
    var m = (d.getUTCMinutes());
    var h = (d.getUTCHours());
    var x = document.getElementById("timer")
    if (h >= 24) {
        h -= 24;
    }
    h = (23 - h);
    m = (59 - m);
    t = h + ":" + addZero(m);
    x.innerHTML = (t);
}, 250);

scootstah · September 6, 2015

It counts down but it is a completely wrong time. Your countdown logic is fundamentally flawed. What is it even counting down to? And why is it starting with the current system time?

https://jsfiddle.net/huj30t4f/

This demo takes the current system date and counts down to 0:00 using correct UTC time.

JayDz · September 6, 2015

It counts down but it is a completely wrong time. Your countdown logic is fundamentally flawed. What is it even counting down to? And why is it starting with the current system time?

https://jsfiddle.net/huj30t4f/

This demo takes the current system date and counts down to 0:00 using correct UTC time.

Somehow it doesnt seem to work for me (i need utc +2 time, not normal utc time btw)

Demo: http://jaydz.eu/test.php

<html>
<head>
<script type="text/javascript">
function countdown(startDate, el)
{
    var hour = startDate.getUTCHours();
    var min = startDate.getUTCMinutes();   
    var interval;
    
    var f = function(){
        if (min == -1) {
            min = 59;
            hour--;
        }
        
        if (min < 10) {
            min = "0" + min;
        }
        
        var time = hour + ':' + min;
        el.innerHTML = time;
        
        if (hour == 0 && min == 00) {
            clearInterval(interval);
        }
        
        min--;
    };
    
    f();
    
    interval = setInterval(f, 60 * 1000);   
}


countdown(new Date(), document.getElementById('timer'));
</script>
</head>
<div id="timer"></div>
</html>

scootstah · September 6, 2015

Okay, this gives UTC +2. http://jsfiddle.net/6qc9crh3/

The reason it's not working for you is because you need to put the script just before the closing </body> tag. The timer element does not exist yet at the time the Javascript is executed.

JayDz · September 8, 2015

Okay, this gives UTC +2. http://jsfiddle.net/6qc9crh3/

The reason it's not working for you is because you need to put the script just before the closing </body> tag. The timer element does not exist yet at the time the Javascript is executed.

It still doesn't seem to work man, demo: https://aio-store.com/timer.php (check page source)

And ur fiddle shows just the time, not a countdown

scootstah · September 8, 2015

You need to put the script at the bottom of the body, after the rest of the DOM.

<body>

<div id="timer"></div>

<script>

function countdown(startDate, el)

{

    var hour = startDate.getHours();

    var min = startDate.getMinutes();   

    var interval;


    var f = function(){

        if (min == -1) {

            min = 59;

            hour--;

        }


        if (min < 10) {

            min = "0" + min;

        }


        var time = hour + ':' + min;

        el.innerHTML = time;


        if (hour == 0 && min == 00) {

            clearInterval(interval);

        }


        min--;

    };


    f();


    interval = setInterval(f, 60 * 1000);   

}


var date = new Date();

var offset = 2.00 * 60 + date.getTimezoneOffset();

var correctedDate = new Date(date.getTime() + offset * 60 * 1000);


countdown(correctedDate, document.getElementById('timer'));

</script>

</body>

And yes, it does count down on JSFiddle - every 1 minute.

JayDz · September 10, 2015

You need to put the script at the bottom of the body, after the rest of the DOM.

<body>
<div id="timer"></div>
<script>
function countdown(startDate, el)
{
    var hour = startDate.getHours();
    var min = startDate.getMinutes();   
    var interval;
    
    var f = function(){
        if (min == -1) {
            min = 59;
            hour--;
        }
        
        if (min < 10) {
            min = "0" + min;
        }
        
        var time = hour + ':' + min;
        el.innerHTML = time;
        
        if (hour == 0 && min == 00) {
            clearInterval(interval);
        }
        
        min--;
    };
    
    f();
    
    interval = setInterval(f, 60 * 1000);   
}

var date = new Date();
var offset = 2.00 * 60 + date.getTimezoneOffset();
var correctedDate = new Date(date.getTime() + offset * 60 * 1000);

countdown(correctedDate, document.getElementById('timer'));
</script>
</body>

And yes, it does count down on JSFiddle - every 1 minute.

This works bro but its still not a countdown for me, it just says the time, it should say:

24:00

23:59

23:58

But it now says:

24:00

0:01

0:02

scootstah · September 10, 2015

This works bro but its still not a countdown for me, it just says the time, it should say:

24:00

23:59

23:58

Yes, which is exactly what it does.

I have changed the interval time to one second, to simulate. View here: http://jsfiddle.net/tg9Lr8ym/

It counts down just as you describe it should.

JayDz · September 10, 2015

Yes, which is exactly what it does.

I have changed the interval time to one second, to simulate. View here: http://jsfiddle.net/tg9Lr8ym/

It counts down just as you describe it should.

No I mean like, it now says:

19:25 and it counts down from UTC+2 time, what I want it to be is:

4:35 and it counts down to 0 and then it starts again from 24:00

Because everyday at 0:00 a cron job gets executed so thats why it should say 4:35 now and countdown to 0 so it says 0:00 when its 0:00

You get what I mean? (ps. thanks for the time ur spending on this <3)

scootstah · September 10, 2015

So you just need to adjust this line to reset the hours to 24, instead of stopping the interval.

if (hour == 0 && min == 00) {

    clearInterval(interval);

}

JayDz · September 11, 2015

So you just need to adjust this line to reset the hours to 24, instead of stopping the interval.
if (hour == 0 && min == 00) {
    clearInterval(interval);
}

This is not what i mean, it now counts down from the UTC+2 time,

I need it to countdown till its 0:00 UTC +2 so when its 11:30 here it shouldnt countdown from 11:30 but it should say:

12:30 and countdown from this, because its 12:30 hours till its 0:00

scootstah · September 11, 2015

I don't really know what you're asking for. Right now, it starts at the current UTC+2 time, and it counts down to 0:00.

If you want it to start at a different time then you need to modify this portion here:

var date = new Date();
var offset = 2.00 * 60 + date.getTimezoneOffset();
var correctedDate = new Date(date.getTime() + offset * 60 * 1000);

JayDz · September 12, 2015

I don't really know what you're asking for. Right now, it starts at the current UTC+2 time, and it counts down to 0:00.

If you want it to start at a different time then you need to modify this portion here:
var date = new Date();
var offset = 2.00 * 60 + date.getTimezoneOffset();
var correctedDate = new Date(date.getTime() + offset * 60 * 1000);

Heres the script running: https://aio-store.com/timers/

It now says 15:07 hours till its 0:00 but this isn't true

its 15:10 right now which means its 8:50 left till its 24:00/0:00

not 15:07 as what the timer is saying..

JayDz · September 13, 2015

Maybe it works if it countsdown right now gets a little change, like this:

24(hours) - current countdown time = the right countdown?

So 24 hours minus the now final countdown time, this would make it work i think

Sign In

JS Countdown script

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information