一个页面的倒计时代码

今天切割一页面,类似于团购网站的商品展示,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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章