基于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 面向对象编程  function是方法(函数)
Sep 17 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 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
DC动漫人物排行
2020/03/03 欧美动漫
提升PHP执行速度全攻略
2006/10/09 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
js word表格动态添加代码
2010/06/07 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
python正则表达式之作业计算器
2016/03/18 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python装饰器代替set get方法实例
2019/12/19 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
高中运动会广播稿
2014/01/21 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
干部对照检查材料范文
2014/08/26 职场文书
个人廉政承诺书
2015/04/28 职场文书