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 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
前端开发基础javaScript的六大作用
Aug 06 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python常用的json标准库
2019/02/19 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python 的AES加密与解密实现
2019/07/09 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
女性时尚网购:Chic Me
2019/07/30 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
会计主管岗位职责
2014/01/03 职场文书
信访工作者先进事迹
2014/01/17 职场文书
关于保护环境的建议书
2014/05/13 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
PHP遍历数组的6种方式总结
2021/11/17 PHP
MongoDB使用场景总结
2022/02/24 MongoDB