页面如下:
?
<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};