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 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
随机推荐
- Prometheus入门到放弃(4)之cadvisor监控docker容器
Prometheus监控docker容器运行状态,我们用到cadvisor服务,cadvisor我们这里也采用docker方式直接运行. 1.下载镜像 [root@prometheus-server ...
- CF13C Sequence(DP+离散化)
题目描述 给定一个序列,每次操作可以把某个数+1-1.要求把序列变成非降数列.求最少的修改次数. 输入输出样例 输入 #1 - 输出 #1 4 输入 #2 输出 #2 1 解题思路 这题是一道非常好题 ...
- python模块知识四 包和logging日志
11.包 包:文件夹下具有__init__.py文件就是一个包,包用来管理多个模块 包的结构如下: bake ├── __init__.py ├── api ├── __init__.py ├── p ...
- 2019/7/18ACM集训
2019-07-18 09:15:34 这个是练习刷的题 Vus the Cossack and Numbers Vus the Cossack has nn real numbers aiai. I ...
- mysql 免费的图形管理工具
在学习go语言开发时,使用了mysql 使用了两天mysql命令行,感觉实在是无法忍受, 找到了一个免费好用的 图形数据库管理工具SQLyog Professional 版本: 注册名:luoye25 ...
- TweenMax参数用法中文介绍
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上,因此,又揉合了这二者的功能,使得功能更加的齐备,但是如果说易用性,觉得还是 TweenLite 来得方便一些 ...
- 2.2_Database Interface:ODBC基本概念
一.无ODBC时代 一般来讲不同的数据库厂商都有自己的数据库开发包,这些开发包支持两种模式的数据库开发; 1.预编译的嵌入模式(例如Oracle的ProC,SQL Server的ESQL) 2.API ...
- WebapiController的名字不能随便取名
在做webapi时候,遇到一个很坑的问题,就是新增一个控制器时,当新增加的控制器名称叫:AccountController.cs 自己测试,通过postman 访问 都没有问题,但是前端调用会报错,说 ...
- JavaScript 数组 遍历方法 map( ) 和 forEach( )
let arr = [1, 3, 7, 6, 9]; 不用知道元素的个数,即不用设置开始下标和结束下标. 1:forEach( )会把数组中的每个值进行操作,没有返回值,undefined let j ...
- Java xml出现错误 javax.xml.transform.TransformerException: java.lang.NullPointerException
转自:https://www.jb51.net/article/98644.htm Java xml出现错误 javax.xml.transform.TransformerException: jav ...