基于jQuery的倒计时实现代码


Posted in Javascript onMay 30, 2012

在线演示:http://demo.3water.com/js/2012/mydaojishi/
打包下载:mydaojishi_3water
核心代码:

$(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面向对象编程之对象使用分析
Aug 19 Javascript
jQuery is()函数用法3例
May 06 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
Javascript实现单例模式
Jan 24 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
基于jquery的放大镜效果
May 30 #Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 #Javascript
Javascript的常规数组和关联数组对比小结
May 24 #Javascript
基于mootools插件实现遮罩层新手引导
May 24 #Javascript
jQuery 拖动层(在可视区域范围内)
May 24 #Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 #Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
奇妙的js
2007/09/24 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
js 窗口抖动示例
2013/09/04 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
2013年高中生自我评价
2013/10/23 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
应届生求职信范文
2014/06/30 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
共青团员自我评价
2015/03/10 职场文书
行政前台岗位职责
2015/04/16 职场文书
董存瑞观后感
2015/06/11 职场文书