js:
$(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>
分享到:
相关推荐
jQuery创意精美的网页倒计时代码是一款时分秒倒计时计时器,点击数字设置好倒计时时间,确定后转到倒计时进度界面。
类似于团购网站的倒计时代码,同一页面可批量调用多个。实时倒计时,兼容各大主流浏览器!
javascript 实现网页 倒计时 代码
这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是...
js倒计时代码带css页面js倒计时代码带css页面
html5 css3圆形进度条倒计时页面跳转代码
倒计时5秒页面进行跳转,从一个页面跳转到另外一个页面
html5 css3圆形进度条倒计时页面跳转代码
jQuery网站建设中倒计时代码是一款黑色创意的倒计时网站建设中即将开放页面模板下载。
使用基础的HTML CSS Javascript 完成一个页面,实现一个元旦倒计时的功能,主要的布局采用了flex弹性布局,图片背景可以根据自己的喜好自适应改变,引入了谷歌适应的个性化字体,配色也可以根据个人喜好来调整rgb...
2分钟倒计时,可实现页面切换、APP处于后台 或者 APP 关闭 倒计时继续(代码中private static final int TIME_DIFF = 120*1000;//时间间隔 2分钟 被我标成10分钟了 自己改下注释 我就不改了 )
元旦倒计时代码+HTML+JavaScript
网站维护倒计时页面Html5代码.7z 弹球时间,会掉下球来的效果。
NULL 博文链接:https://826219395-qq-com.iteye.com/blog/1374703
在这里我们就是利用html能够显示动态时间的原理来做一个动态的倒计时桌面。 第一步:找来一张喜欢的壁纸,放到一个文件夹里,并命名为:backpictrue.jpb。 第二步:在这个文件夹里新建一个记事本文件,把下面的代码...
于是我琢磨下封装了这个倒计时按钮的SDK它能解决上述问题并完美达到预期效果,而且SDK支持代码创建、XIB创建,使用也非常简单。注意这个SDK只能在真机上面跑,不能在xcode模拟器上面跑,因为时间匆忙没有做模拟器...
于是我琢磨下封装了这个倒计时按钮的SDK它能解决上述问题并完美达到预期效果,而且SDK支持代码创建、XIB创建,使用也非常简单。注意这个SDK只能在真机上面跑,不能在xcode模拟器上面跑,因为时间匆忙没有做模拟器...
防止用户重新加载页面时,计时器重新计时....
纯前端实现网页倒计时日历翻牌动画。 不需要其它额外环境,已经包含所需要的所有文件,点击index.html即可。 如果需要修改目标时间,只需要修改index.js文件中开头的时间信息即可。 同时适当修改html页面中的文字...
漂亮的404页面以及时间倒计时跳转首页或指定页面