倒计时的实现

页面如下：

 

<script src="prototype.js" type="text/javascript"></script>
<script src="counter.js" type="text/javascript"></script>

<span style="font-size:32px;color:#82b512;">
  <span id="day0">0</span><span id="day1">0</span> : 
  <span id="hour0">0</span><span id="hour1">0</span> : 
  <span id="min0">0</span><span id="min1">0</span> : 
  <span id="sec0">0</span><span id="sec1">0</span>
</span>

<script type="text/javascript">
  new Countdown({
    toDate:    new Date(Date.parse("10/31/2010 17:00:00 UTC")),
    dayElements:  [$("day0"),   $("day1")],
    hourElements:  [$("hour0"),   $("hour1")],
    minuteElements:  [$("min0"),   $("min1")],
    secondElements:  [$("sec0"),   $("sec1")]
  });
</script>

 

counter.js内容如下：

 

function Countdown(config) {
  this.toDate 		= config.toDate;
  this.dayElements	= config.dayElements;
  this.hourElements	= config.hourElements;
  this.minuteElements	= config.minuteElements;
  this.secondElements	= config.secondElements;
  this.timer		= undefined;
	
  this.update = function() {
    var elapsed = (this.toDate.getTime() 
      - (new Date()).getTime())/1000;
    this.setDisplay(
    this.age(elapsed, Countdown.DAY),
    this.age(elapsed, Countdown.HOUR),
    this.age(elapsed, Countdown.MINUTE),
    this.age(elapsed, Countdown.SECOND)
  );
  };
		
  this.age = function(seconds, t) {
    if (seconds<=0) { return [0, 0]; }
    var s = ((Math.floor(seconds/t.unit))%t.length).toString();
    return (s.length < 2) 
      ? ["0", s] 
    : [s.substring(0, 1), s.substring(1, 2)];
  };
	
  this.setDisplay = function(day, hour, minute, second) {
    this.display(day, this.dayElements);
    this.display(hour, this.hourElements);
    this.display(minute, this.minuteElements);
    this.display(second, this.secondElements);
  };
		
  this.display = function(num, els) {
    els[0].innerHTML = num[0];
    els[1].innerHTML = num[1];
    els[0].className = "num_"+num[0];
    els[1].className = "num_"+num[1];
  };
		
  var that = this;
  this.timer = setInterval(function(){that.update()}, 250);
}
	
Countdown.DAY 		= {unit: 86400, length: 100000};
Countdown.HOUR 		= {unit: 3600, length: 24};
Countdown.MINUTE 	= {unit: 60, length: 60};
Countdown.SECOND 	= {unit: 1, length: 60};