基于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 oop开发滑动(slide)菜单控件
Aug 25 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
浅谈React之状态(State)
Sep 19 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
基于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
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
详解easyui 切换主题皮肤
2019/04/04 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
工作的心得体会
2013/12/31 职场文书
交通事故协议书范文
2014/04/16 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
遗嘱范文
2015/08/07 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL