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中的Split使用方法与技巧
Mar 09 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
js图片无缝滚动插件使用详解
May 26 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 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
留言板翻页的实现详解
2006/10/09 PHP
PHP无限分类的类
2007/01/02 PHP
php实现Mysql简易操作类
2015/10/11 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
python中range()与xrange()用法分析
2016/09/21 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python中np是做什么的
2020/07/21 Python
python 简单的调用有道翻译
2020/11/25 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
成绩单家长评语大全
2014/04/16 职场文书
花坛标语大全
2014/06/30 职场文书
联谊活动总结
2014/08/28 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
新党员入党决心书
2015/09/22 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技