倒计时的实现
页面如下：
?
<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};