jquery 顯示*天*時(shí)*分*秒實(shí)現(xiàn)時(shí)間計(jì)時(shí)器
更新時(shí)間:2014年05月07日 15:38:10 作者:
用jquery實(shí)現(xiàn)時(shí)間計(jì)時(shí)器,從之前的某個(gè)時(shí)間段到現(xiàn)在距離多少天多少時(shí)多少分多少秒,示例代碼如下,大家拷貝即可使用
1.用jquery實(shí)現(xiàn)時(shí)間計(jì)時(shí)器,從之前的某個(gè)時(shí)間段到現(xiàn)在距離多少天多少時(shí)多少分多少秒?
html代碼:
<div id="times_wrap" class="time_num">
距離現(xiàn)在時(shí)間:
<div class="time_w">
<span id="time_d" class="time"> </span >天
<span id="time_h" class="time"> </span >時(shí)
<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();//設(shè)定開(kāi)始時(shí)間
var time_end = new Date().getTime(); //設(shè)定結(jié)束時(shí)間(等于系統(tǒng)當(dāng)前時(shí)間)
//計(jì)算時(shí)間差
var time_distance = time_end - time_start;
if(time_distance > 0){
// 天時(shí)分秒換算
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)
// 時(shí)分秒為單數(shù)時(shí)、前面加零
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;
}
// 顯示時(shí)間
$("#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>
html代碼:
復(fù)制代碼 代碼如下:
<div id="times_wrap" class="time_num">
距離現(xiàn)在時(shí)間:
<div class="time_w">
<span id="time_d" class="time"> </span >天
<span id="time_h" class="time"> </span >時(shí)
<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();//設(shè)定開(kāi)始時(shí)間
var time_end = new Date().getTime(); //設(shè)定結(jié)束時(shí)間(等于系統(tǒng)當(dāng)前時(shí)間)
//計(jì)算時(shí)間差
var time_distance = time_end - time_start;
if(time_distance > 0){
// 天時(shí)分秒換算
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)
// 時(shí)分秒為單數(shù)時(shí)、前面加零
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;
}
// 顯示時(shí)間
$("#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>
相關(guān)文章
jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對(duì)移動(dòng)端的Web UI設(shè)計(jì),其中豐富的表單組件調(diào)用起來(lái)也是相當(dāng)方便,接下來(lái)就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05
基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能示例【附源碼下載】
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,并附帶源碼下載,需要的朋友可以參考下2019-06-06
jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法,涉及jquery通過(guò)定時(shí)器采用Ajax方法讀取并處理XML文件的相關(guān)技巧,需要的朋友可以參考下2015-07-07
jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件
這篇文章主要為大家詳細(xì)介紹了jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
jquery點(diǎn)贊功能實(shí)現(xiàn)代碼 點(diǎn)個(gè)贊吧!
點(diǎn)贊功能很多地方都會(huì)出現(xiàn),如何實(shí)現(xiàn)愛(ài)心點(diǎn)贊功能,這篇文章主要為大家詳細(xì)介紹了jquery點(diǎn)贊功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
jQueryUI DatePicker 添加時(shí)分秒
本文主要介紹jQueryUI DatePicker添加時(shí)分秒的方法,簡(jiǎn)單實(shí)用,需要的朋友可以參考下。2016-06-06
如何解決jQuery EasyUI 已打開(kāi)Tab重新加載問(wèn)題
最近在項(xiàng)目中遇到這樣的需求,要求實(shí)現(xiàn)點(diǎn)擊左側(cè)已經(jīng)打開(kāi)的tab可以刷新重新加載datagrid。下面給大家分享實(shí)現(xiàn)代碼,一起看看吧2016-12-12
3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11

