jquery實(shí)現(xiàn)倒計(jì)時(shí)功能
更新時(shí)間：2015年12月28日 10:36:37 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)功能，詳細(xì)介紹了setInterval()方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery倒計(jì)時(shí)功能的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
定義和用法：
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
下面舉例
<html>
<head>
<meta charset="utf-8">
<title>jquery簡(jiǎn)單倒計(jì)時(shí)</title>
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var intDiff = parseInt(60);//倒計(jì)時(shí)總秒數(shù)量
function timer(intDiff) {
window.setInterval(function() {
var day = 0,
hour = 0,
minute = 0,
second = 0;//時(shí)間默認(rèn)值
if (intDiff > 0) {
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (minute <= 9)
minute = '0' + minute;
if (second <= 9)
second = '0' + second;
$('#day_show').html(day + "天");
$('#hour_show').html('<s id="h"></s>' + hour + '時(shí)');
$('#minute_show').html('<s></s>' + minute + '分');
$('#second_show').html('<s></s>' + second + '秒');
intDiff--;
}, 1000);
}
$(function() {
timer(intDiff);
});
</script>
</head>
<body>
<h1>網(wǎng)頁(yè)上的倒計(jì)時(shí)</h1>
<div class="time-item">
<span id="day_show">0天</span>
<strong id="hour_show">0時(shí)</strong>
<strong id="minute_show">0分</strong>
<strong id="second_show">0秒</strong>
</div>
<!--倒計(jì)時(shí)模塊-->
</body>
</html>
更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題：《倒計(jì)時(shí)功能》
希望本文所述對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
分享20個(gè)提升網(wǎng)站界面體驗(yàn)的jQuery插件
今天為大家整理20個(gè)提升網(wǎng)站界面的體驗(yàn)的jQuery插件，這些都是比較“新款”的代碼，喜歡的請(qǐng)用到你的網(wǎng)站項(xiàng)目上吧2014-12-12
jQuery 中msgTips 頂部彈窗效果實(shí)現(xiàn)代碼
最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗，并且不用用戶手動(dòng)去點(diǎn)擊確定。感覺這樣很方便用戶，下面小編把實(shí)現(xiàn)代碼分享給大家，感興趣的的朋友一起看看吧2017-08-08
JQUERY實(shí)現(xiàn)左側(cè)TIPS滑進(jìn)滑出效果示例
左側(cè)提示滑進(jìn)滑出的平滑效果使用jQuery實(shí)現(xiàn)，具體代碼及截圖如下，感興趣的朋友可以參考下哈，希望對(duì)大家學(xué)習(xí)jquery有所幫助2013-06-06
jquery拖動(dòng)層效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jquery拖動(dòng)層效果插件用法,結(jié)合實(shí)例形式分析了jquery-ui-1.7.2.custom.min.js插件的具體使用技巧,并附帶完整demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
利用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
這篇文章主要介紹了利用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼的相關(guān)資料，對(duì)ajax分頁(yè)感興趣的朋友可以參考一下2016-02-02
在線引用最新jquery文件的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇在線引用最新jquery文件的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
表單提交的時(shí)候 ，是根據(jù)元素的name這個(gè)屬性來(lái)的，只要不加name屬性 就不會(huì)提交，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
Jquery Post處理后不進(jìn)入回調(diào)的原因及解決方法
通過(guò)Jquery的Post方法把Json數(shù)據(jù)傳到Jsp后臺(tái),處理后卻怎么都不進(jìn)入回調(diào)函數(shù),解決方法如下2014-07-07
使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實(shí)現(xiàn)的對(duì)checkbox和radio控件的美化，非常不錯(cuò)，大家可以通過(guò)修改圖片來(lái)實(shí)現(xiàn)更漂亮的效果。2010-11-11
利用jQuery.Validate異步驗(yàn)證用戶名是否存在（推薦）
這篇文章主要介紹了利用jQuery.Validate異步驗(yàn)證用戶名是否存在的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12