<div class="timeBox" data-times="2019/06/30,23:59:59">
距结束 <span class="time date"> 00 </span> 天
<span class="time hour"> 00 </span> :
<span class="time minutes"> 00 </span> :
<span class="time seconds"> 00 </span>
</div>
<div class="timeBox" data-times="2017/07/25,20:20:20">
距结束 <span class="time date"> 00 </span> 天
<span class="time hour"> 00 </span> :
<span class="time minutes"> 00 </span> :
<span class="time seconds"> 00 </span>
</div>
<div class="timeBox" data-times="2018/05/10,18:30:00">
距结束 <span class="time date"> 00 </span> 天
<span class="time hour"> 00 </span> :
<span class="time minutes"> 00 </span> :
<span class="time seconds"> 00 </span>
</div>
<div class="timeBox2" data-times="2018/05/10,20:20:20">
距结束 <span class="time hour"> 00 </span> :
<span class="time minutes"> 00 </span> :
<span class="time seconds"> 00 </span>
</div>
* {
padding:;
margin:;
}
body {
font-size:16px;
}
.timeBox {
color:#6dbec5;
margin:10px auto;
}
.timeBox2 {
color:#12ae53;
margin:10px auto;
}
.time {
border:1px solid #6dbec5;
width:40px;
height:20px;
text-align:center;
line-height:20px;
display:inline-block;
}
var endtime,nowtime,lefttime,d,h,m,s;
var sh;
$.fn.countDown = function(_boolean,_this){
var sh = [];
// var _this = $(this);
_this.each(function(index, el){ var thisObj = $(this);
sh[index]=setInterval(function(){
var times = thisObj.data("times");//获得timeBox的data值,即结束时间
endtime = new Date(times);//把data值转换成时间
nowtime = new Date();//获得当前时间
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //结束时间-当前时间得到毫秒数,再除以1000得到两个时间相差的秒数
if(_boolean){
d=parseInt(lefttime/3600/24);
h=parseInt((lefttime/3600)%24);
}else{
d=parseInt(lefttime/3600/24)*24;
h=parseInt((lefttime/3600)%24)+d;
} m=parseInt((lefttime/60)%60);
s=parseInt(lefttime%60);
if(endtime.getTime() <= nowtime.getTime()){
d = h = m = s = "0";
clearInterval(sh[index]);
}
// 三目运算符
d = d < 10 ? "0"+ d : d;
h = h < 10 ? "0"+ h : h;
m = m < 10 ? "0"+ m : m;
s = s < 10 ? "0"+ s : s; if(_boolean){
thisObj.find(".date").text(d);
} thisObj.find(".hour").text(h);
thisObj.find(".minutes").text(m);
thisObj.find(".seconds").text(s); if(lefttime<=0){
//d = h = m = s = "00";
//thisObj.find('span').hide();
thisObj.html("<b>活动结束</b>");
clearInterval(sh[index]);
}
},1000);
});
} // 调用 $(".timeBox").countDown(true,$(".timeBox"));
$(".timeBox2").countDown(true,$(".timeBox2"));

jquery页面多个倒计时效果的更多相关文章

  1. 【转载】jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. jQuery CircleCounter的环形倒计时效果

    在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...

  4. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

  5. jquery网页倒计时效果,秒杀,限时抢购!

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Javascript之实现页面倒计时效果

    本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...

  7. 页面倒计时跳转页面效果,js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  8. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  9. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

随机推荐

  1. ContainsExtensions不分区大小写

    public static class ContainsExtensions { public static bool Contains(this string source, string valu ...

  2. Python-16-继承、封装、多态

    一.继承 1. 概念 继承是一种创建新类的方式,新建的类可以继承一个或多个父类(python支持多继承),父类又可称为基类或超类,新建的类称为派生类或子类. 子类会“”遗传”父类的属性,从而解决代码重 ...

  3. 【Linux】一步一步学Linux——Bash常用快捷键(11)

    目录 00. 目录 01. 编辑命令 02. 搜索命令 03. 控制命令 04. 其它 05. 参考 00. 目录 @ 生活在 Bash Shell 中,熟记以下快捷键,将极大的提高你的命令行操作效率 ...

  4. css页面加载动画

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. Luogu4233 射命丸文的笔记 DP、多项式求逆

    传送门 注意到总共有\(\frac{n!}{n}\)条本质不同的哈密顿回路,每一条哈密顿回路恰好会出现在\(2^{\binom{n}{2} - n}\)个图中,所以我们实际上要算的是强连通有向竞赛图的 ...

  6. Java日志logback使用

    pom中添加: <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</ ...

  7. DevExtreme学习笔记(一) DataGrid中数据筛选

    config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...

  8. django-nginx与uwsgi项目部署

    uwsgi是提供动态服务的 nginx反向代理 在项目中创建一个settings.py的副本.我这里重命名为copy_settings.py,将配置文件中的DEBUG=False 修改项目下wsgi. ...

  9. SQL注入绕过技巧

    1.绕过空格(注释符/* */,%a0): 两个空格代替一个空格,用Tab代替空格,%a0=空格: % % %0a %0b %0c %0d %a0 %00 /**/ /*!*/ 最基本的绕过方法,用注 ...

  10. JS权威指南读书笔记(四)

    第十章 正则表达式 1 正则表达式直接量定义为包含在一对斜杠(/)之间的字符     a /s$/ == new RegExp("s$") 2 直接量字符:所有字母和数字都是按照字 ...