jQuery實現倒計時功能完整示例
阿新 • • 發佈：2020-06-03
本文例項講述了jQuery實現倒計時功能。分享給大家供大家參考，具體如下：
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.jb51.net 時間倒計時</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)
});
/*
時間倒計時
TimeDown.js
*/
function TimeDown(id,value) {
//倒計時的總秒數
var totalSeconds = parseInt(value / 1000);
//取模（餘數）
var modulo = totalSeconds % (60 * 60 * 24);
//小時數
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;
//輸出到頁面
document.getElementById(id).innerHTML = hours + ":" + minutes + ":" + seconds;
//延遲一秒執行自己
if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){
}else{
setTimeout(function () {
TimeDown(id,value-1000);
},1000)
}
}
</script>
</body>
</html>
執行結果：
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
PS：這裡再為大家推薦幾款時間及日期相關工具供大家參考使用：
線上秒錶工具：
http://tools.jb51.net/bianmin/miaobiao
線上日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
線上日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime
更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery日期與時間操作技巧總結》、《jQuery擴充套件技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery常見經典特效彙總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程式設計有所幫助。