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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
html中table数据排序的js代码
Aug 09 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Vue.extend构造器的详解
Jul 17 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
解决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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
python中实现栈的三种方法
2020/12/19 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
计算机学生求职信范文
2014/01/30 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
asyncio异步编程之Task对象详解
2022/03/13 Python
Python中的 enumerate和zip详情
2022/05/30 Python