倒计时代码

由于脚本的当前时间由服务器提供，所以即使用户修改了自己机器的本地时间，在网页上显示的倒计时时间仍然是正确的。在服务端需要输出一个当前时间戳变量，类似于

  1. var timestamp = 12049781335468750;

倒计时代码和大部分人写的代码都差不多，这里主要是一个start函数。

  1. start:function(timeFix){
  2.     var _fix = timeFix == null ? 0 : timeFix, _ = this;
  3.     this.correctTime = this.timeDiff - _fix;
  4.     if(this.correctTime <=  0){
  5.         this.show(0,0,0,0); return;
  6.     }
  7.     //parseInt not Math.floor
  8.     var _day =  parseInt(this.correctTime/(1000*60*60*24));
  9.     var _hour = parseInt((this.correctTime/(1000*60*60))%24);
  10.     var _minute = parseInt((this.correctTime/(1000*60))%60);
  11.     var _second = parseInt((this.correctTime/1000)%60);
  12.     this.show(_day,_hour,_minute,_second);
  13.     this.timeDiff -= 1000;
  14.     clearTimeout(this.timeoutId);
  15.     //第二次以后timeFix为0
  16.     this.timeoutId = setTimeout(function(){_.start.apply(_);},1000);
  17. }

第一次执行时，需要传递一个时间差(timeFix)给start函数。这个时间差为浏览器解析HTML页面到该脚本开始位置的时间与倒计时代码开始执行的时间之差，示意如下。

  1. <script>
  2. //脚本开始位置
  3. var beginTime = new Date();
  4. </script>
  5. <script src="http://adman.ifeng.com/time/time.aspx?type=js"></script>
  6. <..网页代码部分..>
  7. <script>
  8. //倒计时开始执行位置
  9. js.start(new Date().getTime()-beginTime.getTime());
  10. </script>

脚本使用的时候只用修改show函数即可，这里我做了一个使用数字点阵显示的奥运倒计时。

  1. function DigitDisplay(){
  2.     this.holder = "digit";
  3.     this.tdList = null;
  4.     this.bitArray = {
  5.         '0':'111101101101111',
  6.         '1':'001001001001001',
  7.         '2':'111001111100111',
  8.         '3':'111001111001111',
  9.         '4':'101101111001001',
  10.         '5':'111100111001111',
  11.         '6':'111100111101111',
  12.         '7':'111001001001001',
  13.         '8':'111101111101111',
  14.         '9':'111101111001111',
  15.         'dot':'000010000010000'
  16.     }
  17. }
  18. DigitDisplay.prototype = {
  19.     clear:function(){
  20.         for(var i = 0 ; i < this.tdList.length; i++)
  21.             this.tdList[i].className = "blank";
  22.     },
  23.     preInit:function(){
  24.         this.tdList = $(this.holder).getElementsByTagName('TD');
  25.         this.clear();
  26.     },
  27.     init:function(digit){
  28.         this.preInit();
  29.         var _arr = this.bitArray[digit];
  30.         for(var i = 0 ; i < this.tdList.length; i++){
  31.             if(_arr.charAt(i) == '1') this.tdList[i].className = "filled";
  32.         }
  33.     }
  34. }
  35. //倒计时的show函数，可随意定制需要的功能
  36. CountDown.prototype.show = function(day,hour,minute,second){
  37.     var _timeStr = this.digitFix(day,3)+':'+this.digitFix(hour,2)+':'+this.digitFix(minute,2)+':'+this.digitFix(second,2);
  38.     for(var i = 0, _o = null; i < this.tableList.length; i++){
  39.         _o =  new DigitDisplay();
  40.         _o.holder = this.tableList[i];
  41.         if(isNaN(parseInt(_timeStr.charAt(i)))) 
  42.             _o.init('dot');
  43.         else 
  44.             _o.init(_timeStr.charAt(i));
  45.     }
  46. }

演示地址：http://panweizeng.com/others/countdown.html

[ 分类: 学习 Learning ] 由 Pan 发表于 March 8, 2008 8:38 pm  固定链接 

《倒计时代码》 这篇文章一共有1 条评论   我也想说两句

  1. 潘魏增|学海无涯 » 文章归档 » 在页面中使用点阵显示汉字

    March 8, 2008 10:12 pm

    […] 上篇文章提到用数字点阵显示奥运倒计时，这里扩展一下，不仅可以用点阵显示数字，还可以用点阵显示汉字。先看演示效果。 Javascript脚本部分还是使用原来DigitDisplay对象，只是在bitArray新增了两个成员。 var kaka = new DigitDisplay(); […]

RSS feed for comments on this post. TrackBack URI

相关文章：

发表评论