jquery实现的判断倒计时是否结束代码


Posted in Javascript onFebruary 05, 2016

本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用。

代码如下:

function done(){
var str=$('#end').text(); 
var out=str.match(/\d+/g);
console.log(out); 
var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]); 
console.log(h+'#'+m+'#'+s);
var calc=h*3600+m*60+s;
console.log(calc); 
if(calc==0){
//code
} 
else{
console.log('等待..');
} 
var t=setTimeout('done()',1000);
} 
done();

上面只是代码片段,不能够演示,下面介绍一下它的实现过程。

一.代码注释:

1.function done(){},此函数实现判断倒计时结束效果。
2.var str=$('#end').text(),获取指定元素中的文本内容,本代码中应该倒计时当前时间.
3.var out=str.match(/\d+/g),获取时间日期中数字的数组。
4.var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]),分别获取小时、分钟和秒。
5.var calc=h*3600+m*60+s,转换成秒。
6.if(calc==0){//code},判断倒计时是否结束,然后指定相应的操作。
7.var t=setTimeout('done()',1000),每隔一秒执行一次判断函数。
8.done(),执行此函数。

jquery实现倒计时代码如下所示:

$(function(){ 
var tYear = ""; //输入的年份 
var tMonth = ""; //输入的月份 
var tDate = ""; //输入的日期 
var iRemain = ""; //开始和结束之间相差的毫秒数 
var sDate = ""; //倒计的天数 
var sHour = ""; //倒计时的小时 
var sMin = ""; //倒计时的分钟 
var sSec = ""; //倒计时的秒数 
var sMsec = ""; //毫秒数 
//通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零 
function setDig(num,n){ 
var str = ""+num; 
while(str.length<n){ 
str="0"+str 
} 
return str; 
} 
//获得相差的天,小时,分钟,秒 
function getdate(){ 
//创建开始时间和结束时间的日期对象 
var oStartDate = new Date(); 
var oEndDate = new Date(); 
//获取文本框的值 
tYear = $("#tyear").val(); 
tMonth = $("#tmonth").val(); 
tDate = $("#tdate").val(); 
//设置结束时间 
oEndDate.setFullYear(parseInt(tYear)); 
oEndDate.setMonth(parseInt(tMonth)-1); 
oEndDate.setDate(parseInt(tDate)); 
oEndDate.setHours(0); 
oEndDate.setMinutes(0); 
oEndDate.setSeconds(0); 
//求出开始和结束时间的秒数(除以1000) 
iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000; 
//总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。 
sDate = setDig(parseInt(iRemain/(60*60*24)),3); 
//总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。 
iRemain %= 60*60*24; 
//剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。 
sHour = setDig(parseInt(iRemain/(60*60)),2) 
//剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。 
iRemain %= 60*60; 
//剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。 
sMin = setDig(parseInt(iRemain/60),2) 
//剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。 
iRemain%=60; 
//剩下的秒数 
sSec = setDig(iRemain,2); 
//毫秒数 
sMsec = sSec*100; 
} 
//更改显示的时间 
function updateShow(){ 
$(".showdate span").text(tYear+"-"+tMonth+"-"+tDate); 
$(".count span").each(function(index, element) { 
if(index==0){ 
$(this).text(sDate); 
}else if(index==1){ 
$(this).text(sHour); 
}else if(index == 2){ 
$(this).text(sMin); 
}else if(index == 3){ 
$(this).text(sSec); 
}else if(index == 4){ 
$(this).text(sMsec); 
} 
}); 
} 
//每一秒执行一次时间更新 
function autoTime(){ 
getdate(); 
//如果小于零,清除调用自己,并且返回 
if(iRemain<0){ 
clearTimeout(setT); 
return; 
} 
updateShow(); 
var setT = setTimeout(autoTime,1000); 
} 
//点击按钮开始计时 
$("button").click(function(){ 
autoTime(); 
}) 
})

记录需要注意的地方:

1.取模运算:

iRemain %= 60*60*24;

就是返回余数,在这个实例中的余数,就是把整数拿走后,剩下的秒数。

2.工具函数 setDig(num,n)

可以根据传入的参数,自动在传入的数字前加零

Javascript 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
AngularJs中route的使用方法和配置
Feb 04 #Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 #Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 #Javascript
关于JavaScript作用域你想知道的一切
Feb 04 #Javascript
Node.js重新刷新session过期时间的方法
Feb 04 #Javascript
jquery操作select元素和option的实例代码
Feb 03 #Javascript
Javascript获取统一管理的提示语(message)
Feb 03 #Javascript
You might like
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
java script编程起步(第三课)
2007/01/10 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
党支部公开承诺书
2014/03/28 职场文书
房屋租房协议书范本
2014/12/04 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫