CODEWITHSUNDEEP
javascriptjquerybrowser
Zei
Zei

Reputation: 413

Why isn't this countdown javascript working on any browser other than chrome

There don't appear to be any errors in Safari and it's working perfectly on Chrome, the numbers just don't show up in Safari. I've also checked the mobile version of Safari and Chrome, neither of those work. I honestly can't fathom what's wrong, maybe I've formatted something incorrectly and Chrome is compensating for that automatically.

The code itself is pretty basic, just a simple function to take two datetimes and convert them to an object which holds the number of days, hours, minutes and seconds. Then the other function is just called at a 1 second interval and puts the data into the correct elements.

Here's the live site https://zeiworld.net/countdown.php

Or the code by itself https://jsfiddle.net/4b9py0sg/1/

$(function(){

    function TimeTill( startDate, targetDate, floor ){

        //Set the starting information
        var now = startDate;
        var tar = Date.parse( targetDate );
        var til = tar - now;

        //Split the basic millieseconds between each date into days with a decimal
        var days = til / 1000 / 60 / 60 / 24;

        //Take the decimal from days and multiply it by the hours in a day
        var hours = ( days % 1 ) * 24;

        //Take the decimal from hours and multiply it by the minutes in an hour
        var minutes = ( hours % 1 ) * 60;

        //Take the decimal from minutes and multiply it by the seconds in a minute
        var seconds = ( minutes % 1 ) * 60;

        //Store each value in its respective property, flooring it if required
        if ( floor == true ){

            this.days = Math.floor(days);
            this.hours = Math.floor(hours);
            this.minutes = Math.floor(minutes);
            this.seconds = Math.floor(seconds);

        }else{

            this.days = days;
            this.hours = hours;
            this.minutes = minutes;
            this.seconds = seconds;

        }

    }

    function updateScreen(){
        //Store the time between two dates in an object
        launchIn = new TimeTill( Date.now(), '2016-04-15 20:00:00 CDT', true );

        //Output the time parts to their respective divs
        $('.days').html(launchIn.days);
        $('.hours').html(launchIn.hours);
        $('.minutes').html(launchIn.minutes);
        $('.seconds').html(launchIn.seconds);
    }

    //Start and continue Loop
    updateScreen();
    setInterval( updateScreen, 1000 );

});

Upvotes: 1

Views: 193

Answers (3)

Amio.io
Amio.io

Reputation: 21575

As target date instead of Date.parse('2016-04-15 20:00:00 CDT') use something like new Date(2016, 04, 15, 20).

Then in TimeTill instead of var til = tar - now; use var til = targetDate - now;

I don't understand why your script is not working according to the Date.parse() documentation I don't see any compatibility in the latest browsers... Maybe it is related to a date format?

Upvotes: 0

Zei
Zei

Reputation: 413

Turns out, the code is bang on correct, apparently the problem is that the timestamp I was using "Y-m-d H:i:s" isn't compliant with some cross browser standard called "IETF-compliant RFC 2822 timestamp".

Basically I used dashes instead of slashes and apparently dashes only work on chrome. Who would've guessed.

Just had to change the function call to

new TimeTill( Date.now(), new Date('2016/04/15 20:00:00 CDT'), true );

And all was well. Thanks all!

Upvotes: 1

Blank
Blank

Reputation: 70

I noticed that when you put this in the console in firefox it comes up with NaN

new TimeTill( Date.now(), '2016-04-15 20:00:00 CDT', true );

However, in chrome it doesn't.

Upvotes: 1

Related Questions