分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jquery页面多个倒计时效果

发布时间:2023-09-06 01:53责任编辑:胡小海关键词:暂无标签
<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:0; ???margin:0;}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页面多个倒计时效果

原文地址:https://www.cnblogs.com/li-sir/p/9017968.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved