Jquery倒計時源碼分享

更新時間：2014年05月16日 08:57:45 作者：

這是一個基于jquey寫的倒計時。當(dāng)然代碼有點小改動，只是改了一下展示效果。

在靜態(tài)頁添加顯示倒計時的容器，并引用下面腳本，代入時間參數(shù)即可使用。

timeoutDate——到期時間，時間格式為2014/01/01或2014/1/1

D——天

H——小時

M——分鐘

S——秒

xs——數(shù)字0~9

效果圖：

代碼展示：

html:

復(fù)制代碼代碼如下:

jquery:

復(fù)制代碼代碼如下:

$().ready(function () {
    CcountDown([, , timeoutDate], ['還有&nbsp;<b><font color="#ff0000" size="4">D</font>&nbsp;天&nbsp;</b><b><font color="#ff0000" size="4">H</font>&nbsp;時&nbsp;</b><b><font color="#ff0000" size="4">M</font>&nbsp;分&nbsp;</b><b><font color="#ff0000" size="4">S</font>&nbsp;秒&nbsp;</b><b><font color="#ff0000" size="4">xs</font></b>&nbsp;到期', '', ''], '#top_tuan_countdown', function () { $('#top_tuan_countdown').remove() });
})
function CcountDown(t, c, _self, fn) {
    function nd(d) {
        return isNaN(d) ? (d ? new Date(d).getTime() : new Date().getTime()) : d * 1000;
    }
    var e = [nd(t[0]), nd(t[1]), nd(t[2])], _s = _self, b;
    if (t[0] && e[0] > e[1]) {
        $(_s).html(c[1]);
        return;
    } else if (e[1] > e[2]) {
        fn && fn($(_s));
        $(_s).html(c[2]);
        return;
    }
    (b = function (l) {
        var l = l || (e[2] - e[1]) / 100, k = {
            D: l / 36000 / 24, H: l / 36000 % 24, M: l / 600 % 60, S: l / 10 % 60, xs: l % 10
        };
        $(_s).html(c[0].replace(/D|H|M|S|xs/g, function (m) {
            var n = parseInt(k[m]) + ''
            if (n.length == 1 && m != 'D' && m != 'xs') {
                n = 0 + n;
            }
            return n
        }));
        setTimeout(function () {
            b(l - 1)
        }, 100);
    })()
}

您可能感興趣的文章:

相關(guān)文章

實現(xiàn)點擊下箭頭變上箭頭來回切換的兩種方法【推薦】
本文主要介紹了實現(xiàn)點擊下箭頭變上箭頭來回切換的兩種方法，具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
實例講解Jquery中隱藏hide、顯示show、切換toggle的用法
這篇文章主要介紹了實例講解Jquery中隱藏hide、顯示show、切換toggle的用法，感興趣的小伙伴們可以參考一下
2016-05-05
jquery驗證郵箱格式并顯示提交按鈕
這篇文章主要介紹了jquery驗證郵箱格式并顯示提交按鈕，只有輸入email地址正確才顯示提交按鈕演示，感興趣的小伙伴們可以參考一下
2015-11-11
jquery隔行換色效果實現(xiàn)方法
這篇文章主要介紹了jquery隔行換色效果實現(xiàn)方法,涉及even及odd選擇器的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
Jquery顯示、隱藏元素以及添加刪除樣式
顯示、隱藏元素我們可以通過css來實現(xiàn)；添加刪除樣式我們可以通過js或jquery來實現(xiàn)，下面為大家講解的是使用jquery實現(xiàn)元素的顯示隱藏及樣式的添加與刪除
2013-08-08
基于jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫
這篇文章主要介紹了基于jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫,感興趣的小伙伴們可以參考一下
2016-03-03
jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下
2016-12-12
jQuery實現(xiàn)獲取table表格第一列值的方法
這篇文章主要介紹了jQuery實現(xiàn)獲取table表格第一列值的方法,涉及jQuery針對table表格元素的遍歷與讀取相關(guān)技巧,需要的朋友可以參考下
2016-03-03
jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果,通過jquery頁面scroll事件及邊距計算實現(xiàn)網(wǎng)頁的菜單固定效果,非常簡單實用,需要的朋友可以參考下
2015-09-09
jQuery實現(xiàn)ctrl+enter（回車）提交表單
本文章來給大家介紹在我們輸入完內(nèi)容之后直接按Ctrl+Enter提交表單實現(xiàn)程序，此方法一般是用于textarea中哦，其它的input這類的就不需了。
2015-10-10