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中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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 curl常用的5个经典例子
2017/01/20 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Python中调用其他程序的方式详解
2019/08/06 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
财务总监管理职责范文
2014/03/09 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
《春晓》教学反思
2014/04/20 职场文书
小学生读书活动总结
2014/06/30 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年教师节广播稿
2015/08/19 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python