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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
微信小程序用户授权最佳实践指南
May 08 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
帅气的琦玉老师
2020/03/02 日漫
PHP array_multisort()函数的使用札记
2011/07/03 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
vue小白入门教程
2018/04/02 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python 如何对文件目录操作
2020/07/10 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
亿企通软件测试面试题
2012/04/10 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
文明餐桌活动方案
2014/02/11 职场文书
物业总经理岗位职责
2014/02/28 职场文书
公司总经理岗位职责
2014/03/15 职场文书
新学期感想
2015/08/10 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
如何解决php-fpm启动不了问题
2021/11/17 PHP