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 25 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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 Document 代码注释规范
2009/04/13 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
js实现禁止中文输入的方法
2015/01/14 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
工程监理应届生求职信
2013/11/09 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
预备党员承诺书
2014/03/25 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android