今天切割一页面,类似于团购网站的商品展示,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>
分享到:
相关推荐
在JavaScript(JS)中,实现一个页面多个倒计时功能是一项常见的需求,特别是在电商网站上,如淘宝和京东,用于显示商品秒杀活动的倒计时。这种功能能够吸引用户注意力,增加活动的紧迫感,从而提高转化率。本文将...
在倒计时代码中,CSS通常用来设置倒计时数字的样式,比如字体大小、颜色、背景、边框等,以确保倒计时醒目且符合节日主题。 `NewYear.js`是JavaScript文件,JavaScript是一种脚本语言,常用于网页交互和动态效果。...
jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能和简单易用的API,使得创建创意精美的网页倒计时代码变得轻而易举。本项目就是基于jQuery实现的一个时分秒倒计时计时器,用户可以自定义倒计时时间,增加了...
在JavaScript中实现网页倒计时是一项常见的任务,尤其在创建活动页面、竞赛倒计时或者定时发布内容等场景中非常实用。本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能,并结合提供的`index.html`和`js`...
类似于团购网站的倒计时代码,同一页面可批量调用多个。实时倒计时,兼容各大主流浏览器!
这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是一段元旦倒计时倒计时代码,web页面,浏览器直接打卡既可以访问。这是...
为了演示这个过程,文章中还提供了一个倒计时组件的示例代码。这个示例中定义了一个计算属性showtime来控制倒计时的显示,以及一个countDown方法来处理倒计时逻辑。在countDown方法中,通过setInterval设定1秒钟执行...
每次执行时,它会更新页面上的倒计时显示(这里假设有一个id为`countdown`的元素来显示倒计时),并递减剩余秒数。当秒数减至0时,清除定时器并使用`window.location.href`属性改变当前页面的URL,从而实现跳转。 ...
本资源提供了一个精简实用的倒计时代码,适用于JavaScript和jQuery环境,易于理解和定制。以下是对这个倒计时代码的核心知识点的详细解释: 1. **倒计时原理**:倒计时通常是通过计算当前时间与设定结束时间之间的...
首先,我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能: 1. **初始化倒计时**:在页面加载时,为每个倒计时元素设定初始时间,例如通过HTML数据属性设置。 2. **定时更新**:使用`setInterval`...
在这个“html5 css3圆形进度条倒计时页面跳转代码”项目中,我们可以看到这两者如何结合,创造出动态且吸引用户的界面效果。 首先,HTML5的新特性允许开发者创建更加结构化的网页元素,例如`<article>`、`<section>...
在这个"jquery数字读秒的倒计时代码.zip"压缩包中,我们可能会找到一个基于jQuery实现的倒计时功能,它在网页上显示剩余时间,通常用于活动预告或考试计时等场景。 倒计时代码的核心原理是利用JavaScript的Date对象...
"网站简约404页面倒计时跳转源码.zip"是一个包含HTML源码的压缩包,用于创建一个具有倒计时功能的404页面,它会在设定的时间后自动跳转到预设的网页。这样的设计可以避免用户长时间停留在错误页面上,减少用户流失。...
如果是网页应用,可以创建一个定时器(`setInterval`函数)每隔一段时间就请求服务器更新倒计时状态。 ```javascript function updateCountdown() { // 使用Ajax请求获取服务器上的倒计时数据 $.ajax({ url: '...
本资源"jQuery网站建设中倒计时代码.zip"提供了一种黑色创意的倒计时设计方案,用于创建一个即将开放的页面模板。 首先,我们来详细了解一下jQuery中的倒计时实现原理。jQuery本身并不直接包含倒计时的功能,但可以...
在本例中,我们关注的是HTML5的一个特殊应用——网页倒计时代码特效。 倒计时通常用于网站上预告活动、产品发布或者截止日期等场景,为用户提供一种直观的时间感知。HTML5网页倒计时代码特效利用了HTML5中的`<time>...
在这个倒计时代码中,HTML可能会包含一个特定的容器元素,用于显示倒计时的时间信息。例如,可以使用<div id="countdown"></div>来创建一个区域,然后通过JavaScript动态更新这个区域的内容。 接着,CSS被用来美化...
综合以上,这个HTML5倒计时代码集成了前端开发的三大核心技术,提供了一个轻量级、可定制的解决方案。无论是前端开发者还是对网页编程感兴趣的用户,都可以通过学习和修改这个代码来提升自己的技能,同时满足各种倒...
根据给定的信息,本文将详细解释倒计时代码的相关知识点,包括如何在HTML页面中实现一个简单的倒计时功能。 ### 一、倒计时代码的实现原理 倒计时功能通常通过编程语言来实现,这里展示的是使用JavaScript在HTML...
在Vue网页倒计时代码.zip这个压缩包中,我们可以预见到包含了一个使用Vue.js实现的网页倒计时功能的示例。倒计时功能在网页应用中非常常见,比如用于活动倒计时、考试倒计时等场景。下面,我们将深入探讨Vue.js如何...