一個頁面的倒計時代碼

今天切割一頁面，類似于團購網站的商品展示，N個競拍商品，每個都得有單獨的倒計時截止時間，期間雜七雜八的事一大堆。幸虧哥定力好，醞釀到大家都下班，辦公室安靜了，才着手寫頁面的js：倒計時。網上也有類似功能的代碼，但都不怎麼好用，幹脆自己寫吧。 

分析了一下基本功能：時分秒，三級定時關聯，倒計時開關，初始化變量等等...

差不多就是這個思路，最後，處理了一些小細節。可能還有bug，等待被發現

Javascript代碼

1.$(function(){   

2.//====倒計時====   

3.        var timePush = {},timeId,STATIC = {'0':'h','1':'m','2':'s'},items = $(".items-prod li");   

4.        $(".time-left", items).each(function(index, callback) {   

5.            timePush["T" + index] = returnTime.call(this);   

6.        });   

7.  

8.        timeId = setTimeout(function() {   

9.            if (isEmptyObj.call(timePush)) {   

10.                clearTimeout(timeId);   

11.                return false;   

12.            }   

13.            //提前預定 處理   

14.            timeId = setTimeout(arguments.callee, 1000);   

15.            //處理   

16.            $.each(timePush, function(index, callback) {   

17.                //遞歸擷取更新後的時間   

18.                var timeItem = getTime(this, 2);   

19.                if (timeItem.join("") - 0 == 0) {   

20.                    deleteTime(index);   

21.                } else {   

22.                    updateTime(index, timeItem);   

23.                }   

24.            });   

25.        }, 1);   

26.  

27.        function getTime(arr, type, pre) {   

28.            if (type < 0)return 0;   

29.            var num = _numTmp = ~~arr[type],_type = STATIC["" + type];   

30.            switch (_type) {   

31.                case 'h':   

32.                    --num < 0 ? pre = 0 : num;   

33.                    break;   

34.                case 'm':   

35.                    num = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);   

36.                    pre = ~~arr[type - 1] || _numTmp ? pre : 0;   

37.                    arr[type] = num;   

38.                    break;   

39.                case 's':   

40.                    arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);   

41.                    break;   

42.                default:   

43.                    break;   

44.            }   

45.            if (pre != void 0)return pre;   

46.            return arr;   

47.        }   

48.  

49.        function updateTime(key, arr) {   

50.            var index = key.replace(/[^\d]/g, ''),str = arr.join("").split("");   

51.            $(".time-left", items.eq(index)).find("span i").each(function(index) {   

52.                this.innerHTML = str[index];   

53.            })   

54.        }   

55.  

56.        function deleteTime(key) {   

57.            var index = key.replace(/[^\d]/g, '');   

58.            delete timePush[key];   

59.            $(".reply-btn", items.eq(index)).attr("class", "submit-btn disabled-big").html('<span><em></em>已經結束</span>');   

60.            $(".time-left", items.eq(index)).find("span i").html(0);   

61.        }   

62.  

63.        function isEmptyObj() {   

64.            for (var i in this)return false;   

65.            return true;   

66.        }   

67.  

68.        function fixed2Str(number) {   

69.            if (number < 10)number = "0" + number;   

70.            return "" + number;   

71.        }   

72.  

73.        function returnTime() {   

74.            var time = [];   

75.            $("span", this).each(function() {   

76.                time.push($(this).text());   

77.            });   

78.            return time;   

79.        }   

80.});  

$(function(){

//====倒計時====

        var timePush = {},timeId,STATIC = {'0':'h','1':'m','2':'s'},items = $(".items-prod li");

        $(".time-left", items).each(function(index, callback) {

            timePush["T" + index] = returnTime.call(this);

        });

        timeId = setTimeout(function() {

            if (isEmptyObj.call(timePush)) {

                clearTimeout(timeId);

                return false;

            }

            //提前預定 處理

            timeId = setTimeout(arguments.callee, 1000);

            //處理

            $.each(timePush, function(index, callback) {

                //遞歸擷取更新後的時間

                var timeItem = getTime(this, 2);

                if (timeItem.join("") - 0 == 0) {

                    deleteTime(index);

                } else {

                    updateTime(index, timeItem);

                }

            });

        }, 1);

        function getTime(arr, type, pre) {

            if (type < 0)return 0;

            var num = _numTmp = ~~arr[type],_type = STATIC["" + type];

            switch (_type) {

                case 'h':

                    --num < 0 ? pre = 0 : num;

                    break;

                case 'm':

                    num = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);

                    pre = ~~arr[type - 1] || _numTmp ? pre : 0;

                    arr[type] = num;

                case 's':

                    arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);

                default:

            if (pre != void 0)return pre;

            return arr;

        }

        function updateTime(key, arr) {

            var index = key.replace(/[^\d]/g, ''),str = arr.join("").split("");

            $(".time-left", items.eq(index)).find("span i").each(function(index) {

                this.innerHTML = str[index];

            })

        function deleteTime(key) {

            var index = key.replace(/[^\d]/g, '');

            delete timePush[key];

            $(".reply-btn", items.eq(index)).attr("class", "submit-btn disabled-big").html('<span><em></em>已經結束</span>');

            $(".time-left", items.eq(index)).find("span i").html(0);

        function isEmptyObj() {

            for (var i in this)return false;

            return true;

        function fixed2Str(number) {

            if (number < 10)number = "0" + number;

            return "" + number;

        function returnTime() {

            var time = [];

            $("span", this).each(function() {

                time.push($(this).text());

            return time;

});

複制代碼

HTML 

Html代碼

1.<div class="time-leave">  

2.                    <span class="fl">剩餘時間：</span>  

3.  

4.                    <div class="time-left fl"><p>  

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.                    </div>  

7.                </div>

本文轉自 wws5201985 51CTO部落格，原文連結：http://blog.51cto.com/wws5201985/737005，如需轉載請自行聯系原作者