CODEWITHSUNDEEP
javascripthtml
Mike Anderson
Mike Anderson

Reputation: 23

How to make this countdown timer auto reset when done?

I have this countdown timer script:

<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

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

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' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/27/2012 1:36 PM";
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();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);

I want to make it so once the timer reaches 0, it adds 2 days to the original date and resets itself.

Here is what I came up with:

CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = true;
var SetTimeOutPeriod = (Math.abs(targetdate)-1)*2000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
CountBack(gsecs);

But it doesn't seem to be working. Any help or tips on how to fix this?

Upvotes: 0

Views: 1431

Answers (1)

machineghost
machineghost

Reputation: 35730

There are two ways to do repeating time-based events in Javascript. The first approach, which you're trying, is to do a timeout, then invoke another timeout from within the first timeout's callback (and then that timeout invokes another timeout from its callback, and so on and so forth).

That basic approach totally works (and I imagine if you do a bit of debugging you can get it to work for you), but there's also an alternate approach: setInterval.

setInterval runs the same code over and over again, every timeout period. If you did something like:

window.setInterval((putspan, Math.abs(targetdate)-1)*2000 + 990)

it should also solve your problem.

As a side note, using eval-ed code (javascript inside a string) is a terrible idea for many reasons. I recommend using functions instead (like I did with putspan in my example). You can use jQuery's proxy or Underscore's bind to "fix" arguments in place, like so:

var putspanWithColor = $.proxy(putspan, this, BackColor, ForeColor);
window.setInterval(putspanWithColor, Math.abs(targetdate)-1)*2000 + 990)

Upvotes: 1

Related Questions