一个页面的倒计时代码

今天切割一页面，类似于团购网站的商品展示，N个竞拍商品，每个都得有单独的倒计时截止时间，期间杂七杂八的事一大堆。幸亏哥定力好，酝酿到大家都下班，办公室安静了，才着手写页面的js：倒计时。网上也有类似功能的代码，但都不怎么好用，干脆自己写吧。
分析了一下基本功能：时分秒，三级定时联动，倒计时开关，初始化变量等等...

差不多就是这个思路，最后，处理了一些小细节。可能还有bug，等待被发现

Javascript代码

1. 1.$(function(){   
    
2. 2.//====倒计时====   
    
3. 3.        var timePush = {},timeId,STATIC = {'0':'h','1':'m','2':'s'},items = $(".items-prod li");   
    
4. 4.        $(".time-left", items).each(function(index, callback) {   
    
5. 5.            timePush["T" + index] = returnTime.call(this);   
    
6. 6.        });   
    
7. 7.  
    
8. 8.        timeId = setTimeout(function() {   
    
9. 9.            if (isEmptyObj.call(timePush)) {   
    
10. 10.                clearTimeout(timeId);   
     
11. 11.                return false;   
     
12. 12.            }   
     
13. 13.            //提前预定 处理   
     
14. 14.            timeId = setTimeout(arguments.callee, 1000);   
     
15. 15.            //处理   
     
16. 16.            $.each(timePush, function(index, callback) {   
     
17. 17.                //递归获取更新后的时间   
     
18. 18.                var timeItem = getTime(this, 2);   
     
19. 19.                if (timeItem.join("") - 0 == 0) {   
     
20. 20.                    deleteTime(index);   
     
21. 21.                } else {   
     
22. 22.                    updateTime(index, timeItem);   
     
23. 23.                }   
     
24. 24.            });   
     
25. 25.        }, 1);   
     
26. 26.  
     
27. 27.        function getTime(arr, type, pre) {   
     
28. 28.            if (type < 0)return 0;   
     
29. 29.            var num = _numTmp = ~~arr[type],_type = STATIC["" + type];   
     
30. 30.            switch (_type) {   
     
31. 31.                case 'h':   
     
32. 32.                    --num < 0 ? pre = 0 : num;   
     
33. 33.                    break;   
     
34. 34.                case 'm':   
     
35. 35.                    num = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);   
     
36. 36.                    pre = ~~arr[type - 1] || _numTmp ? pre : 0;   
     
37. 37.                    arr[type] = num;   
     
38. 38.                    break;   
     
39. 39.                case 's':   
     
40. 40.                    arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);   
     
41. 41.                    break;   
     
42. 42.                default:   
     
43. 43.                    break;   
     
44. 44.            }   
     
45. 45.            if (pre != void 0)return pre;   
     
46. 46.            return arr;   
     
47. 47.        }   
     
48. 48.  
     
49. 49.        function updateTime(key, arr) {   
     
50. 50.            var index = key.replace(/[^\d]/g, ''),str = arr.join("").split("");   
     
51. 51.            $(".time-left", items.eq(index)).find("span i").each(function(index) {   
     
52. 52.                this.innerHTML = str[index];   
     
53. 53.            })   
     
54. 54.        }   
     
55. 55.  
     
56. 56.        function deleteTime(key) {   
     
57. 57.            var index = key.replace(/[^\d]/g, '');   
     
58. 58.            delete timePush[key];   
     
59. 59.            $(".reply-btn", items.eq(index)).attr("class", "submit-btn disabled-big").html('<span><em></em>已经结束</span>');   
     
60. 60.            $(".time-left", items.eq(index)).find("span i").html(0);   
     
61. 61.        }   
     
62. 62.  
     
63. 63.        function isEmptyObj() {   
     
64. 64.            for (var i in this)return false;   
     
65. 65.            return true;   
     
66. 66.        }   
     
67. 67.  
     
68. 68.        function fixed2Str(number) {   
     
69. 69.            if (number < 10)number = "0" + number;   
     
70. 70.            return "" + number;   
     
71. 71.        }   
     
72. 72.  
     
73. 73.        function returnTime() {   
     
74. 74.            var time = [];   
     
75. 75.            $("span", this).each(function() {   
     
76. 76.                time.push($(this).text());   
     
77. 77.            });   
     
78. 78.            return time;   
     
79. 79.        }   
     
80. 80.});  
     
81. $(function(){
     
82. //====倒计时====
     
83.         var timePush = {},timeId,STATIC = {'0':'h','1':'m','2':'s'},items = $(".items-prod li");
     
84.         $(".time-left", items).each(function(index, callback) {
     
85.             timePush["T" + index] = returnTime.call(this);
     
86.         });
     
87. 
     
88.         timeId = setTimeout(function() {
     
89.             if (isEmptyObj.call(timePush)) {
     
90.                 clearTimeout(timeId);
     
91.                 return false;
     
92.             }
     
93.             //提前预定 处理
     
94.             timeId = setTimeout(arguments.callee, 1000);
     
95.             //处理
     
96.             $.each(timePush, function(index, callback) {
     
97.                 //递归获取更新后的时间
     
98.                 var timeItem = getTime(this, 2);
     
99.                 if (timeItem.join("") - 0 == 0) {
     
100.                     deleteTime(index);
      
101.                 } else {
      
102.                     updateTime(index, timeItem);
      
103.                 }
      
104.             });
      
105.         }, 1);
      
106. 
      
107.         function getTime(arr, type, pre) {
      
108.             if (type < 0)return 0;
      
109.             var num = _numTmp = ~~arr[type],_type = STATIC["" + type];
      
110.             switch (_type) {
      
111.                 case 'h':
      
112.                     --num < 0 ? pre = 0 : num;
      
113.                     break;
      
114.                 case 'm':
      
115.                     num = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
      
116.                     pre = ~~arr[type - 1] || _numTmp ? pre : 0;
      
117.                     arr[type] = num;
      
118.                     break;
      
119.                 case 's':
      
120.                     arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
      
121.                     break;
      
122.                 default:
      
123.                     break;
      
124.             }
      
125.             if (pre != void 0)return pre;
      
126.             return arr;
      
127.         }
      
128. 
      
129.         function updateTime(key, arr) {
      
130.             var index = key.replace(/[^\d]/g, ''),str = arr.join("").split("");
      
131.             $(".time-left", items.eq(index)).find("span i").each(function(index) {
      
132.                 this.innerHTML = str[index];
      
133.             })
      
134.         }
      
135. 
      
136.         function deleteTime(key) {
      
137.             var index = key.replace(/[^\d]/g, '');
      
138.             delete timePush[key];
      
139.             $(".reply-btn", items.eq(index)).attr("class", "submit-btn disabled-big").html('<span><em></em>已经结束</span>');
      
140.             $(".time-left", items.eq(index)).find("span i").html(0);
      
141.         }
      
142. 
      
143.         function isEmptyObj() {
      
144.             for (var i in this)return false;
      
145.             return true;
      
146.         }
      
147. 
      
148.         function fixed2Str(number) {
      
149.             if (number < 10)number = "0" + number;
      
150.             return "" + number;
      
151.         }
      
152. 
      
153.         function returnTime() {
      
154.             var time = [];
      
155.             $("span", this).each(function() {
      
156.                 time.push($(this).text());
      
157.             });
      
158.             return time;
      
159.         }
      
160. });

复制代码

HTML

Html代码

1. 1.<div class="time-leave">  
    
2. 2.                    <span class="fl">剩余时间：</span>  
    
3. 3.  
    
4. 4.                    <div class="time-left fl"><p>  
    
5. 5.                        <span><i>0</i><i>0</i></span><span><i>3</i><i>6</i></span><span><i>3</i><i>9</i></span></p>  
    
6. 6.                    </div>  
    
7. 7.                </div>

复制代码