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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
JavaScript 中的六种循环方法
Jan 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使用百度翻译api示例分享
2014/01/31 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
教大家制作简单的php日历
2015/11/17 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python线程的几种创建方式详解
2019/08/29 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
详解Django配置JWT认证方式
2020/05/09 Python
django rest framework 过滤时间操作
2020/07/12 Python
Django websocket原理及功能实现代码
2020/11/14 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Oracle 多表查询基本语法实例
2022/04/18 Oracle