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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 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
php无限分类使用concat如何实现
2015/11/05 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
浅谈Python NLP入门教程
2017/12/25 Python
浅析python的优势和不足之处
2018/11/20 Python
详解Python3中ceil()函数用法
2019/02/19 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
行政管理专业推荐信
2013/11/02 职场文书
地球一小时倡议书
2014/04/15 职场文书
医院院务公开实施方案
2014/05/03 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
同学毕业留言寄语
2015/02/27 职场文书