基于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 相关文章推荐
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
微信小程序实现圆形进度条动画
Nov 18 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
Smarty模板快速入门
2007/01/04 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php递归json类实例
2014/12/02 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
Vue指令指令大全
2019/02/09 Javascript
详解jquery和vue对比
2019/04/16 jQuery
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Django入门使用示例
2017/12/12 Python
详解Python自建logging模块
2018/01/29 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
2014财务人员自我评价范文
2014/09/21 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
女方离婚起诉书
2015/05/18 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL