一个页面的倒计时代码-阿里云开发者社区

一个页面的倒计时代码

2017-11-15 1015

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

今天切割一页面，类似于团购网站的商品展示，N个竞拍商品，每个都得有单独的倒计时截止时间，期间杂七杂八的事一大堆。幸亏哥定力好，酝酿到大家都下班，办公室安静了，才着手写页面的js：倒计时。网上也有类似功能的代码，但都不怎么好用，干脆自己写吧。
分析了一下基本功能：时分秒，三级定时联动，倒计时开关，初始化变量等等...

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

Javascript代码

1.$(function(){
2.//====倒计时====
3. var timePush = {},timeId,STATIC = {'0':'h','1':'m','2':'s'},items = $(".items-prod li");
4. $(".time-left", items).each(function(index, callback) {
5. timePush["T" + index] = returnTime.call(this);
6. });
7.
8. timeId = setTimeout(function() {
9. if (isEmptyObj.call(timePush)) {
10. clearTimeout(timeId);
11. return false;
12. }
13. //提前预定处理
14. timeId = setTimeout(arguments.callee, 1000);
15. //处理
16. $.each(timePush, function(index, callback) {
17. //递归获取更新后的时间
18. var timeItem = getTime(this, 2);
19. if (timeItem.join("") - 0 == 0) {
20. deleteTime(index);
21. } else {
22. updateTime(index, timeItem);
23. }
24. });
25. }, 1);
26.
27. function getTime(arr, type, pre) {
28. if (type < 0)return 0;
29. var num = _numTmp = ~~arr[type],_type = STATIC["" + type];
30. switch (_type) {
31. case 'h':
32. --num < 0 ? pre = 0 : num;
33. break;
34. case 'm':
35. num = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
36. pre = ~~arr[type - 1] || _numTmp ? pre : 0;
37. arr[type] = num;
38. break;
39. case 's':
40. arr[type] = fixed2Str(--num < 0 ? getTime(arr, type - 1, 59) : num);
41. break;
42. default:
43. break;
44. }
45. if (pre != void 0)return pre;
46. return arr;
47. }
48.
49. function updateTime(key, arr) {
50. var index = key.replace(/[^\d]/g, ''),str = arr.join("").split("");
51. $(".time-left", items.eq(index)).find("span i").each(function(index) {
52. this.innerHTML = str[index];
53. })
54. }
55.
56. function deleteTime(key) {
57. var index = key.replace(/[^\d]/g, '');
58. delete timePush[key];
59. $(".reply-btn", items.eq(index)).attr("class", "submit-btn disabled-big").html('已经结束');
60. $(".time-left", items.eq(index)).find("span i").html(0);
61. }
62.
63. function isEmptyObj() {
64. for (var i in this)return false;
65. return true;
66. }
67.
68. function fixed2Str(number) {
69. if (number < 10)number = "0" + number;
70. return "" + number;
71. }
72.
73. function returnTime() {
74. var time = [];
75. $("span", this).each(function() {
76. time.push($(this).text());
77. });
78. return time;
79. }
80.});
$(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('已经结束');
$(".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

Html代码

1.<div class="time-leave">
2. 剩余时间：
3.
4. <div class="time-left fl">
5. 003639
6. </div>
7. </div>

复制代码

本文转自 wws5201985 51CTO博客，原文链接：http://blog.51cto.com/wws5201985/737005，如需转载请自行联系原作者

一个页面的倒计时代码

热门文章

最新文章

相关电子书