基于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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP数据库操作面向对象的优点
2006/10/09 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php生成mysql的数据字典
2016/07/07 PHP
jquery中animate动画积累的解决方法
2013/10/05 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
协议书的格式
2014/04/23 职场文书
总经理人事任命书
2014/06/05 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
排球赛新闻稿
2015/07/17 职场文书
公司备用金管理制度
2015/08/04 职场文书
python中的被动信息搜集
2021/04/29 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python