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小测验(代码集合)
Jul 27 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
javascript类型转换使用方法
Feb 08 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
vue实现循环滚动列表
Jun 30 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代码的53条建议
2008/03/27 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python 列表理解及使用方法
2017/10/27 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
回门宴答谢词
2014/01/13 职场文书
战略合作协议书范本
2014/04/18 职场文书
医师定期考核实施方案
2014/05/07 职场文书
工会积极分子个人总结
2015/03/03 职场文书
博士给导师的自荐信
2015/03/06 职场文书
中秋节寄语2015
2015/03/24 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers