浏览 1964 次
锁定老帖子 主题:一个页面的倒计时代码
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-12-05
分析了一下基本功能:时分秒,三级定时联动,倒计时开关,初始化变量等等... 差不多就是这个思路,最后,处理了一些小细节。可能还有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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |