基于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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
Javascript的this详解
Mar 23 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
原生js实现随机点名功能
Nov 05 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
基于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
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
webpack打包优化的几个方法总结
2020/02/10 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
python从入门到精通(DAY 2)
2015/12/20 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
传播学专业毕业生自荐信
2013/11/04 职场文书
酒吧创业计划书
2014/01/18 职场文书
运动会100米解说词
2014/01/23 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
科学发展观标语
2014/10/08 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
检讨书怎么写
2015/01/23 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL