今天切割一页面，类似于团购网站的商品展示，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('<span><em></em>已经结束</span>');
- 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('<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
Html代码
- 1.<div class="time-leave">
- 2. <span class="fl">剩余时间：</span>
- 3.
- 4. <div class="time-left fl"><p>
- 5. <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>
- 6. </div>
- 7. </div>
复制代码 本文转自 wws5201985 51CTO博客，原文链接：http://blog.51cto.com/wws5201985/737005，如需转载请自行联系原作者