Using same code for chrome and firefox but get different results

Question

I have a simple count down script. The code works in chrome but not firefox. In firefox it displays NaN but chrome shows the countdown any ideas why this happens?

function CountDownTimer(time, name) {
  var counter = setInterval(function(){
    var today = new Date();
    var expire = new Date(time);
    var timeRemains = expire - today;

    var days  = Math.floor(timeRemains / (1000 * 60 * 60 * 24));
    var hours = Math.floor(timeRemains / (1000 * 60 * 60));
    var mins  = Math.floor(timeRemains / (1000 * 60));
    var secs  = Math.floor(timeRemains / 1000);

    var dd = days;
    var hh = hours - days  * 24;
    var mm = mins  - hours * 60;
    var ss = secs  - mins  * 60;

    if (expire < today) {
      clearInterval(counter);
      document.getElementById(name).innerHTML = '<span class="expire">expire!</span>';
      return;
    } else {
         if (dd < 10) {
             dd = "0" + dd;
         }
         if (hh < 10) {
             hh = "0" + hh;
         }
         if (mm < 10) {
             mm = "0" + mm;
         }
         if (ss < 10) {
             ss = "0" + ss;
         }
         document.getElementById(name).innerHTML = dd + ' : ' + hh + ' : ' + mm + ' : ' + ss;
    }
  }, 1000 );
}


CountDownTimer("2012-07-06 19:00:00", "Time1");

_time_ seems like a questionable name for a variable to me... — jahroy, Jul 07 '12 at 02:20
@Mr.1.0 - Try `var today = +new Date();var expire = +new Date(time);` — Derek 朕會功夫, Jul 07 '12 at 02:28

score 2 · Answer 1 · answered Jul 07 '12 at 02:06

2

Change the date format for something like this:

CountDownTimer("June 7, 2012 19:00:00", "Time1");

answered Jul 07 '12 at 02:06

Leo

1,753
3
20
23

it says expired for any date i add – Daniel Jul 07 '12 at 02:14
@Leo - Um... If it works on Google Chrome, then probably that is not the problem. – Derek 朕會功夫 Jul 07 '12 at 02:32

Cameron Lattz · Accepted Answer · 2012-07-07T02:17:24.147

2

The Date() function doesn't seem to work well across all browsers. Try using setUTC functions on it, like so:

today.setUTCFullYear(2012);
today.setUTCHours(19, 0, 0, 0);

UPDATE: Date() constructor fine on all browsers, just not when an "improper" string is used. Try this:

var today = new Date(2012,6,7,19,0,0)

edited Jul 07 '12 at 02:17

answered Jul 07 '12 at 02:09

Cameron Lattz

83
8

how do i make it work with the function? i tried `CountDownTimer("2012,6,7,19,0,0,", "test");` and without quotes but still returns `NaN` – Daniel Jul 07 '12 at 02:21
@Cameron Lattz - It *should* work well across all browsers because it is the standard format. See [MDN for more information](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/#Example:_Several_ways_to_assign_dates). – Derek 朕會功夫 Jul 07 '12 at 02:31
@Derek: Yes, it does work well on all browsers. At first, I mistakenly spoke from personal recollection. I edited my answer. Also, there might be a string format that works cross-browser, but depending on how he plans to use his function (seems like he wants to allow a user to input their own date and time), the Date() constructor which takes integers as parameters, or the setUTC functions, is probably the optimal solution. – Cameron Lattz Jul 07 '12 at 02:39
@Mr. 1.0: You will have to change 3 lines of your code, like this: `function CountDownTimer(y, mo, d, h, mi, s, name) {`, then `var today = new Date(y,mo,d,h,mi,s);`, and `CountDownTimer(2012,6,7,19,0,0, "Time1");` – Cameron Lattz Jul 07 '12 at 02:58

score 0 · Answer 3 · edited Jul 07 '12 at 03:35

0

NaN stands for not a number.

If Leo's suggestion doesn't help, it's probably worth adding a few sporadic console.log()'s into the mix to find out where the problem is.

edited Jul 07 '12 at 03:35

nhahtdh

55,989
15
126
162

answered Jul 07 '12 at 02:10

did you seriously just grammar nazi me? – Jul 07 '12 at 11:39

score 0 · Answer 4 · edited May 23 '17 at 10:34

The issue is with the new Date() format, which is not consistent across browsers.

Problem with date formats in JavaScript with different browsers.

You can likely make it work by converting the - chars to /. Cameron's answer should provide good cross-browser behaviour, otherwise consider using a 3rd party library such as moment.js

https://stackoverflow.com/questions/802861/javascript-date-manipulation-library

Using same code for chrome and firefox but get different results

4 Answers4