CODEWITHSUNDEEP
javascriptjquery
vinylDeveloper
vinylDeveloper

Reputation: 707

Creating Multiple Objects using the same functions

I have a timer that counts down to 0. It works fine with one, but I want to create a second timer on the same page. I can create the second timer, but it won't countdown and the first one counts down twice as fast. How would I do this. Here is my code

<script>
var Timer;
var TotalSeconds;

function CreateTimer(TimerID, Time) {
  Timer = document.getElementById(TimerID);
  TotalSeconds = Time;
  UpdateTimer()
  window.setTimeout("Tick()", 1000);
}

function Tick() {
  if(TotalSeconds <= 0) {
    TotalSeconds = 0;
    return;
  }

  TotalSeconds -= 1;
  UpdateTimer()
  window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
  var Seconds = TotalSeconds;
  var Days = Math.floor(Seconds / 86400);
  Seconds -= Days * 86400;
  var Hours = Math.floor(Seconds / 3600);
  Seconds -= Hours * (3600);
  var Minutes = Math.floor(Seconds / 60);
  Seconds -= Minutes * (60);
  var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
  Timer.innerHTML = TimeStr;
}

function LeadingZero(Time) {
  return(Time < 10) ? "0" + Time : +Time;
}
</script>

<?php 
$tomorrow  = mktime(0, 0, 0, date("m")  , date("d")+1, date("Y"));
$currentTime = time();
$today = $tomorrow - $currentTime;
?>

<div id="timer"></div>

<script type="text/javascript">
  var today = <?php echo $today; ?>
  window.onload = CreateTimer("timer", today);
</script>

<div id="timer2"></div>

<script type="text/javascript">
  var today = <?php echo $today; ?>
  window.onload = CreateTimer("timer2", today);
</script>

Upvotes: 0

Views: 266

Answers (2)

RobG
RobG

Reputation: 147523

Here's an example of how to make an independent timer. Parameters are passed to start, they might be better passed to getTimer or to an init function. There is also call a stop method to stop the timer at any time, clear and restart methods could be easily added.

function getTimer() {
  var el, currentNum, lag, timerRef;

  function start(id, startNum, delay) {
    el = document.getElementById(id);
    currentNum = startNum;
    lag = delay;
    run();
  }

  function run() {
    if (timerRef) stop();
    el.innerHTML = currentNum;
    if (currentNum--) {
      timerRef = setTimeout(run, lag);
    }
  }

  function stop() {
    if (timerRef) clearTimeout(timerRef);
  }

  return {
    start: start,
    run: run, 
    stop: stop
  };
}

window.onload = function() {

  var t0 = getTimer();
  t0.start('d0', 10, 1000);

  var t1 = getTimer();
  t1.start('d1', 20, 500);

  var t2 = getTimer();
  t2.start('d2', 40, 250);
}

HTML:

<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>

Upvotes: 1

Amy
Amy

Reputation: 7496

The reason it's ticking twice as fast is because both the countdowns are sharing the same TotalSeconds variable.

Upvotes: 2

Related Questions