一个页面的倒计时代码
今天切割一页面，类似于团购网站的商品展示，N个竞拍商品，每个都得有单独的倒计时截止时间，期间杂七杂八的事一大堆。幸亏哥定力好，酝酿到大家都下班，办公室安静了，才着手写页面的js：倒计时。网上也有类似功能的代码，但都不怎么好用，干脆自己写吧。分析了一下基本功能：时分秒，三级定时联动，倒计时开关，初始化变量等等...
差不多就是这个思路，最后，处理了一些小细节。可能还有bug，等待被发现http://www.agoit.com/images/smiles/icon_smile.gif
$(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 = 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 || _numTmp ? pre : 0; arr = num; break; case 's': arr = 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; }) } function deleteTime(key) { var index = key.replace(/[^\d]/g, ''); delete timePush; $(".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>
页:
[1]