jquery 显示*天*时*分*秒实现时间计时器


Posted in Javascript onMay 07, 2014

1.用jquery实现时间计时器,从之前的某个时间段到现在距离多少天多少时多少分多少秒?

html代码:

<div id="times_wrap" class="time_num"> 
距离现在时间: 
<div class="time_w"> 
<span id="time_d" class="time"> </span >天 
<span id="time_h" class="time"> </span >时 
<span id="time_m" class="time"> </span >分 
<span id="time_s" class="time"> </span >秒 
</div> 
</div> <script type="text/javascript"> 
$(function(){ 
show_time(); 
}); 
function show_time(){ 
var time_start = new Date("2013/10/01 00:00:00").getTime();//设定开始时间 
var time_end = new Date().getTime(); //设定结束时间(等于系统当前时间) 
//计算时间差 
var time_distance = time_end - time_start; 
if(time_distance > 0){ 
// 天时分秒换算 
var int_day = Math.floor(time_distance/86400000) 
time_distance -= int_day * 86400000; 
var int_hour = Math.floor(time_distance/3600000) 
time_distance -= int_hour * 3600000; 
var int_minute = Math.floor(time_distance/60000) 
time_distance -= int_minute * 60000; 
var int_second = Math.floor(time_distance/1000) 
// 时分秒为单数时、前面加零 
if(int_day < 10){ 
int_day = "0" + int_day; 
} 
if(int_hour < 10){ 
int_hour = "0" + int_hour; 
} 
if(int_minute < 10){ 
int_minute = "0" + int_minute; 
} 
if(int_second < 10){ 
int_second = "0" + int_second; 
} 
// 显示时间 
$("#time_d").html(int_day); 
$("#time_h").html(int_hour); 
$("#time_m").html(int_minute); 
$("#time_s").html(int_second); 
setTimeout("show_time()",1000); 
}else{ 
$("#time_d").html('00'); 
$("#time_h").html('00'); 
$("#time_m").html('00'); 
$("#time_s").html('00'); 
} 
} 
</script>
Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
最短的IE判断代码
Mar 13 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 #Javascript
addEventListener 的用法示例介绍
May 07 #Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 #Javascript
关闭时刷新父窗口两种方法
May 07 #Javascript
js获取下拉列表的值和元素个数示例
May 07 #Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 #Javascript
table行随鼠标移动变色示例
May 07 #Javascript
You might like
php小偷相关截取函数备忘
2010/11/28 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python安装selenium包详细过程
2019/07/23 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
从python读取sql的实例方法
2020/07/21 Python
python中doctest库实例用法
2020/12/31 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python