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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
基于vue 动态菜单 刷新空白问题的解决
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
ip签名探针
2006/10/09 PHP
PHP中GET变量的使用
2006/10/09 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
javascript Keycode对照表
2009/10/24 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python获取中文字符串长度的方法
2018/11/14 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
python判断元素是否存在的实例方法
2020/09/24 Python
HTML5进度条特效
2014/12/18 HTML / CSS
教师中国梦演讲稿
2014/04/23 职场文书
优秀护士先进事迹
2014/05/08 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015新学期家长寄语
2015/02/26 职场文书
用人单位聘用意向书
2015/05/11 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书