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自定义事件及事件交互原理概述(一)
Feb 01 Javascript
js 窗口抖动示例
Sep 04 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
配置支持SSI
2006/11/25 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python中分数的相关使用教程
2015/03/30 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python统计字符的个数代码实例
2020/02/07 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python实现井字棋小游戏
2020/03/04 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
幼教简历自我评价
2014/01/28 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
初中优秀学生评语
2014/12/29 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
美丽的大脚观后感
2015/06/03 职场文书
农村老人去世追悼词
2015/06/23 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
SpringBoot快速入门详解
2021/07/21 Java/Android
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL