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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
实例解析Array和String方法
Dec 14 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
比较node.js和Deno
Apr 27 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
javascript 写类方式之四
2009/07/05 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python多线程实例教程
2014/09/06 Python
python http接口自动化脚本详解
2018/01/02 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
数控专业毕业生自荐信范文
2014/03/04 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年司机工作总结
2015/04/23 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python