论坛首页 Web前端技术论坛

一个页面的倒计时代码

浏览 1930 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-12-05  
今天切割一页面,类似于团购网站的商品展示,N个竞拍商品,每个都得有单独的倒计时截止时间,期间杂七杂八的事一大堆。幸亏哥定力好,酝酿到大家都下班,办公室安静了,才着手写页面的js:倒计时。网上也有类似功能的代码,但都不怎么好用,干脆自己写吧。
分析了一下基本功能:时分秒,三级定时联动,倒计时开关,初始化变量等等...

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

$(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;
                    break;
                case 's':
                    arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
                    break;
                default:
                    break;
            }
            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
<div class="time-leave">
                    <span class="fl">剩余时间:</span>

                    <div class="time-left fl"><p>
                        <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>
                    </div>
                </div>

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics