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学习笔记8 用JSON做原型
Jan 11 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
js保留两位小数方法总结
Jan 31 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
react的hooks的用法详解
Oct 12 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写的求多项式导数的函数代码
2012/07/04 PHP
php curl基本操作详解
2013/07/23 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python 爬虫模拟登陆知乎
2016/09/23 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
迟到检讨书1000字
2014/01/15 职场文书
工作评语大全
2014/04/26 职场文书
银行进社区活动总结
2014/07/07 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2015年双拥工作总结
2015/04/08 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
Python语言中的数据类型-序列
2022/02/24 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫