基于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 相关文章推荐
Maps Javascript
Jan 22 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
layui选项卡效果实现代码
May 19 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
详解TypeScript中的类型保护
Apr 29 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
JS 树形递归实例代码
2010/05/18 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python常见数据结构详解
2014/07/24 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Django实现网页分页功能
2019/10/31 Python
Python ORM编程基础示例
2020/02/02 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
网络技术支持面试题
2013/04/22 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
保密工作责任书
2014/04/16 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
学习经验交流会策划书
2015/11/02 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript