jquery 显示*天*时*分*秒实现时间计时器

所属分类: 网络编程 / JavaScript 阅读数: 1960
收藏 0 赞 0 分享
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>
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多