Firefox shows NaN on countdown script

[xcandiottix]

I am trying to make a small script that counts down from server time to a specific time in the future. The time cannot be altered by the browser / timezone of the visitor. THis script works great in chrome and IE but fails on firefox.

 

Can anyone point me in the right direction?

<script language="javascript">
TargetDate = "<?php echo $time;?>";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%%:%%H%%:%%M%%:%%S%%";
FinishMessage = "JUST ENDED";

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return s;
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' class='time'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date("<?php echo date("Y-m-d H:i:s"); ?>");
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>

 

[PaulRyan]

That seems long winded for a countdown script, take a look at the following quickly thrown together from me, it should get you on your way

 

<?PHP 

  date_default_timezone_set('Europe/London');

  $thatTime = 1297569630;

?>

<script type="text/javascript">
<!--

  thatTime = <?PHP echo $thatTime+1;?>;

  function thisCountDown() {
    var thisTime = <?PHP echo time();?>;
        thatTime = thatTime-1;
    var timeDiff = thatTime-thisTime;

    if(timeDiff <= 0) { document.getElementById('countDown').innerHTML='Timer Ended'; return false; }

    var thisDays  = Math.floor(timeDiff/60/60/24);
    var thisHours = (Math.floor(timeDiff/60/60)-(thisDays*24));
    var thisMins  = ((Math.floor(timeDiff/60)-(thisDays*24*60))-(thisHours*60));
    var thisSecs  = (((Math.floor(timeDiff)-(thisDays*24*60*60))-(thisHours*60*60))-(thisMins*60));

    if(thisDays  < 10 && thisDays  >= 1) { thisDays  = '0'+thisDays;  }
    if(thisHours < 10 && thisHours >= 1) { thisHours = '0'+thisHours; }
    if(thisMins  < 10 && thisMins  >= 1) { thisMins  = '0'+thisMins;  }
    if(thisSecs  < 10 && thisSecs  >= 1) { thisSecs  = '0'+thisSecs;  }

    document.getElementById('countDown').innerHTML=thisDays+' days, '+thisHours+' hours, '+thisMins+' minutes, '+thisSecs+' seconds';

    setTimeout("thisCountDown('countDown')",1000);
  }

  window.onload=thisCountDown;

//-->
</script>

<div id="countDown"></div>

 

Any issues, just reply back here.

 

Regards, PaulRyan.

[xcandiottix]

This script is a great improvement!

 

Thanks so much, it works perfect across all browsers.