jquery页面多个倒计时效果
<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页面多个倒计时效果的更多相关文章
- 【转载】jquery版的网页倒计时效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery版的网页倒计时效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery CircleCounter的环形倒计时效果
在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...
- 【jQuery】手机验证码倒计时效果
<ul class="ulist"> <li class="group"> <label class="label&qu ...
- jquery网页倒计时效果,秒杀,限时抢购!
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript之实现页面倒计时效果
本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...
- 页面倒计时跳转页面效果,js倒计时效果
页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- jQuery Countdown Timer 倒计时效果
这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
随机推荐
- 【转帖】从 Oracle 到 PostgreSQL ,某保险公司迁移实践 技术实践
从 Oracle 到 PostgreSQL ,某保险公司迁移实践 http://www.itpub.net/2019/11/08/4108/ 信泰人寿保险股份有限公司 摘要:去O一直是金融保险行业永恒 ...
- JMeter进行Apache Kafka负载测试
1.卡夫卡负载测试 在这个Apache Kafka教程中,我们将了解如何使用Apache JMeter,如何在Apache Kafka上执行Kafka负载测试.此外,这个Kafka负载测试教程教我们如 ...
- memcached源码分析二-lru
在前一篇文章中介绍了memcached中的内存管理策略slab,那么需要缓存的数据是如何使用slab的呢? 1. 缓存对象item内存分布 在memcached,每一个缓存的对象都使用一个ite ...
- xorm -sum 系列方法实例
求和数据可以使用Sum, SumInt, Sums 和 SumsInt 四个方法,Sums系列方法的参数为struct的指针并且成为查询条件. package main import ( " ...
- 路由Routers
路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...
- Hadoop2.8.4集群配置
建hadoop用户 #添加用户hadoop adduser hadoop 这个过程中需要输入密码两次 Enter new password: Retype new password: passwd: ...
- Description Resource Path Location Type Unknown Unknown Unknown org.eclipse.core.internal.resources.Marker is not of a displayable type
是访问限制报错. 方法一: 全局属性Project>preferences>java>Compiler>Errors/Warnings>把右侧的[Deprecated a ...
- 封装的PKPM BimView的方法
封装的方法 var ObvApiWrapper; if (!ObvApiWrapper) { ObvApiWrapper = {}; } ObvApiWrapper = function(build, ...
- Cookie 和 Session 总结
Cookie 和 Session 区别 cookie数据存放在客户的浏览器上,session数据放在服务器上 cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑* ...
- iOS 10.0前的Notification推送
前言 推送为远程推送,一般由苹果APNS服务器发送给苹果设备(iPhone,iPad) 推送分在前台和后台.在前台时 用户可以在application 的代理回调接口中做相应处理:在后台时 系统会全权 ...