六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 22|回复: 0

一个页面的倒计时代码

[复制链接]

升级  54%

37

主题

37

主题

37

主题

秀才

Rank: 2

积分
131
 楼主| 发表于 2013-1-29 08:56:09 | 显示全部楼层 |阅读模式
今天切割一页面,类似于团购网站的商品展示,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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表