基于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 函数式编程的原理
Oct 16 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
react中使用swiper的具体方法
May 15 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 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
模仿OSO的论坛(四)
2006/10/09 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JavaScript 常用函数
2009/12/30 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python气泡提示与标签的实现
2020/04/01 Python
python主要用于哪些方向
2020/07/05 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
求职信格式范本
2013/11/15 职场文书
质检部部长职责
2013/12/16 职场文书
如何写好升职自荐信
2014/01/06 职场文书
中文专业自荐书
2014/06/29 职场文书
国际会计专业求职信
2014/08/04 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
个园导游词
2015/02/04 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
python实现学员管理系统(面向对象版)
2022/06/05 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技