Jump to content

JS Countdown script


JayDz

Recommended Posts

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! :)

Link to comment
Share on other sites

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 :/

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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..

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.