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 相关文章推荐
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
Vue.js快速入门教程
Sep 07 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
关于JS中的作用域中的问题思考分享
Apr 06 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
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python实现斐波那契递归函数的方法
2014/09/08 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python文字转语音实现过程解析
2019/11/12 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
学生手册评语
2014/05/05 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
芙蓉镇观后感
2015/06/10 职场文书
Python图片检索之以图搜图
2021/05/31 Python