jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能完整示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能。分享給大家供大家參考,具體如下:
demo代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.dbjr.com.cn 時(shí)間倒計(jì)時(shí)</title>
</head>
<body>
<form id="form1" runat="server">
<div id="show">
</div>
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
TimeDown("show", 3600000)
});
/*
時(shí)間倒計(jì)時(shí)
TimeDown.js
*/
function TimeDown(id, value) {
//倒計(jì)時(shí)的總秒數(shù)
var totalSeconds = parseInt(value / 1000);
//取模(余數(shù))
var modulo = totalSeconds % (60 * 60 * 24);
//小時(shí)數(shù)
var hours = Math.floor(modulo / (60 * 60));
modulo = modulo % (60 * 60);
//分鐘
var minutes = Math.floor(modulo / 60);
//秒
var seconds = modulo % 60;
hours = hours.toString().length == 1 ? '0' + hours : hours;
minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;
//輸出到頁(yè)面
document.getElementById(id).innerHTML = hours + ":" + minutes + ":" + seconds;
//延遲一秒執(zhí)行自己
if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){
}else{
setTimeout(function () {
TimeDown(id, value-1000);
}, 1000)
}
}
</script>
</body>
</html>
運(yùn)行結(jié)果:

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
PS:這里再為大家推薦幾款時(shí)間及日期相關(guān)工具供大家參考使用:
在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao
在線日期/天數(shù)計(jì)算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期天數(shù)差計(jì)算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具:
http://tools.jb51.net/code/unixtime
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery倒計(jì)時(shí)代碼(超簡(jiǎn)單)
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
- jquery 倒計(jì)時(shí)效果實(shí)現(xiàn)秒殺思路
- jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
- jQuery 實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能
- jquery實(shí)現(xiàn)可關(guān)閉的倒計(jì)時(shí)廣告特效代碼
- jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)
- JS/jquery實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)內(nèi)同時(shí)調(diào)用多個(gè)倒計(jì)時(shí)的方法
相關(guān)文章
ASP.NET jQuery 實(shí)例18 通過(guò)使用jQuery validation插件校驗(yàn)DropDownList
這節(jié)我們還可以通過(guò)直接設(shè)置DropDownList屬性來(lái)設(shè)置jQuery validation插件的校驗(yàn)規(guī)則和提示信息2012-02-02
jquery實(shí)現(xiàn)可橫向和豎向展開的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
使用jQuery動(dòng)態(tài)設(shè)置單選框的選中效果
這篇文章主要介紹了使用jQuery動(dòng)態(tài)設(shè)置單選框的選中效果,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
JQuery基于FormData異步提交數(shù)據(jù)文件
這篇文章主要介紹了JQuery基于FormData異步提交數(shù)據(jù)文件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
在次封裝easyui-Dialog插件實(shí)現(xiàn)代碼
在次封裝easyui-Dialog插件實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11
基于jQuery的投票系統(tǒng)顯示結(jié)果插件
投票系統(tǒng)是網(wǎng)站中十分常見(jiàn)的系統(tǒng),顯示結(jié)果也是十分常見(jiàn)的。最近因?yàn)轫?xiàng)目需要開發(fā)了一個(gè)投票結(jié)果顯示jQuery插件。2011-08-08
jQuery基于正則表達(dá)式的表單驗(yàn)證功能示例
這篇文章主要介紹了jQuery基于正則表達(dá)式的表單驗(yàn)證功能,包括針對(duì)字符串、郵件、網(wǎng)址、電話等常見(jiàn)正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-01-01
基于Jquery與WebMethod投票功能實(shí)現(xiàn)代碼
基于Jquery與WebMethod投票功能實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01

