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 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
javascript内置对象操作详解
Feb 04 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
webpack打包js的方法
Mar 12 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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嵌套输出缓冲代码实例
2015/05/12 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
解决Python requests 报错方法集锦
2017/03/19 Python
Python实现购物程序思路及代码
2017/07/24 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python截取两个单词之间的内容方法
2018/12/25 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
2014和解协议书范文
2014/09/15 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电