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 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
随机推荐
- [IOT] - Raspberry Pi 3B + Windows 10 IOT Core + .Net Core Web 部署
硬件:Raspberry Pi 3B 系统:Windows 10 IOT Core 应用:.Net Core Web 部署流程 1. 系统安装 1.1 下载并安装 Windows 10 IoT Cor ...
- 如何创建Kafka客户端:Avro Producer和Consumer Client
1.目标 - Kafka客户端 在本文的Kafka客户端中,我们将学习如何使用Kafka API 创建Apache Kafka客户端.有几种方法可以创建Kafka客户端,例如最多一次,至少一次,以及一 ...
- Django框架深入了解_03(DRF之认证组件、权限组件、频率组件、token)
一.认证组件 使用方法: ①写一个认证类,新建文件:my_examine.py # 导入需要继承的基类BaseAuthentication from rest_framework.authentica ...
- 【Linux】一步一步学Linux——Linux系统目录详解(09)
目录 00. 目录 01. 文件系统介绍 02. 常用目录介绍 03. /etc目录文件 04. /dev目录文件 05. /usr目录文件 06. /var目录文件 07. /proc 08. 比较 ...
- WITH AS学习
一.WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候, ...
- Ali-Tomcat 安装
通过在 Eclipse 安装 Tomcat4e 插件,或者在 Intellij Idea 安装配置 Ali-tomcat,可以快 速方便地启动并调试基于 EDAS 服务化框架 HSF 开发的应用. 1 ...
- COCOeval接口使用
COCOeval类简介 class COCOeval: # Interface for evaluating detection on the Microsoft COCO dataset. # # ...
- ubuntu 16.04 循环登陆问题
换了个titan x重装显卡驱动失败之后一直循环登陆,试了N种处理显卡驱动的方法,并没有啥用. 最后查看了一下.Xerrer文件(具体的文件名我给忘记了),发现是.Xauthority. 现象:在Ub ...
- 如何更精准地设置 C# / .NET Core 项目的输出路径?(包括添加和删除各种前后缀)
原文:如何更精准地设置 C# / .NET Core 项目的输出路径?(包括添加和删除各种前后缀) 我们都知道可以通过在 Visual Studio 中设置输出路径(OutputPath)来更改项目输 ...
- flutter isolate demo
main.dart import 'package:flutter/material.dart'; import 'package:flutter_isolate/flutter_isolate.da ...