Jquery倒計(jì)時(shí)源碼分享

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

這是一個(gè)基于jquey寫的倒計(jì)時(shí)。當(dāng)然代碼有點(diǎn)小改動(dòng)，只是改了一下展示效果。

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

timeoutDate——到期時(shí)間，時(shí)間格式為2014/01/01或2014/1/1

D——天

H——小時(shí)

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;時(shí)&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)文章

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