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 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery实现显示已选用户
Jul 21 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
解决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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
深入理解javascript动态插入技术
2013/11/12 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
VUE实现吸底按钮
2021/03/04 Vue.js
python抓取网页中图片并保存到本地
2015/12/01 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
python列表使用实现名字管理系统
2019/01/30 Python
django url到views参数传递的实例
2019/07/19 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
电子邮箱格式怎么写
2014/01/12 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
学困生转化工作总结
2015/08/13 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
python模板入门教程之flask Jinja
2022/04/11 Python