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实现计算两个日期的间隔天数
Aug 14 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
jQuery中的select操作详解
Nov 29 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php简单日历函数
2015/10/28 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
JS 统计时间
2021/03/09 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
机关办公室岗位职责
2014/04/16 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
借名购房协议书范本
2014/10/06 职场文书
中层干部考核评语
2015/01/04 职场文书
2015年暑假工作总结
2015/07/13 职场文书
学习心得体会
2019/06/20 职场文书