JavaScript使用小插件實(shí)現(xiàn)倒計(jì)時(shí)的方法講解
CountDown.js
一個(gè)用來(lái)實(shí)現(xiàn)簡(jiǎn)單頁(yè)面倒計(jì)時(shí)的輕量級(jí)工具
API
CountDown.openTimeCountBySeconds()
根據(jù)要計(jì)時(shí)的秒數(shù)打開(kāi)一個(gè)顯示剩余時(shí)間的倒計(jì)時(shí)
參數(shù):
- Ele: 放置倒計(jì)時(shí)的元素
- CountDownSeconds: 要計(jì)時(shí)的秒數(shù)
- Sign: 用于給倒計(jì)時(shí)設(shè)置標(biāo)記 (可以給多個(gè)倒計(jì)時(shí)設(shè)置同一個(gè)標(biāo)記)
- Divider: 分割時(shí)分秒的分割符
- EndFunc: 倒計(jì)時(shí)結(jié)束時(shí)執(zhí)行的方法
ps:以上均為可選參數(shù)
示例
CountDown.openTimeCountBySeconds({ Ele: document.getElementById('h1'), CountDownSeconds: 3600, Sign: 'flypie', Divider: ':', EndFunc: function () { console.log('end'); } });
CountDown.openTimeCountByStartAndEndDate()
根據(jù)計(jì)時(shí)開(kāi)始和結(jié)束時(shí)間打開(kāi)一個(gè)顯示剩余時(shí)間的倒計(jì)時(shí)
參數(shù):
- Ele: 放置倒計(jì)時(shí)的元素
- StartDate: 倒計(jì)時(shí)開(kāi)始時(shí)間 (date類(lèi)型)
- EndDate: 倒計(jì)時(shí)結(jié)束時(shí)間 (date類(lèi)型)
- Sign: 用于給倒計(jì)時(shí)設(shè)置標(biāo)記 (可以給多個(gè)倒計(jì)時(shí)設(shè)置同一個(gè)標(biāo)記)
- Divider: 分割時(shí)分秒的分割符
- EndFunc: 倒計(jì)時(shí)結(jié)束時(shí)執(zhí)行的方法
ps:除StartDate,EndDate外均為可選參數(shù)
示例
var startDate = new Date(); var endDate = new Date(); endDate.setDate(endDate.getDate()+1); CountDown.openTimeCountByStartAndEndDate({ Ele: document.getElementById('h1'), StartDate: startDate, EndDate: endDate, Sign: 'flypie', Divider: ':', EndFunc: function () { console.log('end'); } });
CountDown.openTimeCountByStartAndEndDate()
根據(jù)計(jì)時(shí)開(kāi)始和結(jié)束時(shí)間打開(kāi)一個(gè)顯示剩余天數(shù)加時(shí)間的倒計(jì)時(shí)
參數(shù):
- Ele: 放置倒計(jì)時(shí)的元素
- StartDate: 倒計(jì)時(shí)開(kāi)始時(shí)間 (date類(lèi)型)
- EndDate: 倒計(jì)時(shí)結(jié)束時(shí)間 (date類(lèi)型)
- Sign: 用于給倒計(jì)時(shí)設(shè)置標(biāo)記 (可以給多個(gè)倒計(jì)時(shí)設(shè)置同一個(gè)標(biāo)記)
- Divider: 分割時(shí)分秒的分割符
- DateDivider: 天數(shù)和時(shí)間之間的分隔符
- EndFunc: 倒計(jì)時(shí)結(jié)束時(shí)執(zhí)行的方法
ps:除StartDate,EndDate外均為可選參數(shù)
示例
var startDate = new Date(); var endDate = new Date(); endDate.setDate(endDate.getDate()+10); CountDown.openDateAndTimeCountByStartAndEndDate({ Ele: document.getElementById('h1'), StartDate: startDate, EndDate: endDate, Sign: 'flypie', Divider: ':', DateDivider: '天 ', EndFunc: function () { console.log('end'); } });
CountDown.stopBySign()
根據(jù)標(biāo)記零時(shí)暫停一個(gè)倒計(jì)時(shí)
CountDown.stopBySign('flypie');
CountDown.resumeBySign()
根據(jù)標(biāo)記恢復(fù)一個(gè)被零時(shí)暫停的倒計(jì)時(shí)
CountDown.resumeBySign('flypie');
CountDown.closeBySign()
根據(jù)標(biāo)記永久性地關(guān)閉一個(gè)倒計(jì)時(shí)
CountDown.closeBySign('flypie');
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
- JavaScript碎片—函數(shù)閉包(模擬面向?qū)ο螅?/a>
- javascript中數(shù)組的常用算法深入分析
- 詳解javascript 變量提升(Hoisting)
- JavaScript中常用的簡(jiǎn)潔高級(jí)技巧總結(jié)
- JavaScript解析機(jī)制與閉包原理實(shí)例詳解
- Javascript之高級(jí)數(shù)組API的使用實(shí)例
- JavaScript實(shí)現(xiàn)預(yù)覽本地上傳圖片功能完整示例
- 詳解JavaScript函數(shù)callee、call、apply的區(qū)別
- JavaScript函數(shù)的4種調(diào)用方法實(shí)例分析
- Javascript讀寫(xiě)cookie的實(shí)例源碼
相關(guān)文章
用JS編寫(xiě)一個(gè)函數(shù),返回?cái)?shù)組中重復(fù)出現(xiàn)過(guò)的元素(實(shí)例)
下面小編就為大家?guī)?lái)一篇用JS編寫(xiě)一個(gè)函數(shù),返回?cái)?shù)組中重復(fù)出現(xiàn)過(guò)的元素(實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09JavaScript之Getters和Setters 平臺(tái)支持等詳細(xì)介紹
現(xiàn)在,JavaScript的Getters和Setters使用非常廣泛,它和每個(gè)JavaScript開(kāi)發(fā)者的切身利益息息相關(guān),我們先來(lái)快速了解什么是Getters和Setters,以及它們?yōu)槭裁春苡杏?然后,我們來(lái)看看現(xiàn)在都有哪些平臺(tái)支持Gettets和Setters2012-12-12javascript函數(shù)以及基礎(chǔ)寫(xiě)法100多條實(shí)用整理
100多個(gè)很有用的JavaScript函數(shù)以及基礎(chǔ)寫(xiě)法匯總,在項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)使用到,本文整理了一些,希望對(duì)你們有幫助2013-01-01防止瀏覽器記住用戶(hù)名及密碼的簡(jiǎn)單實(shí)用方法
很多瀏覽器都有自動(dòng)填寫(xiě)功能,我在input上使用了autocomplete="off",但在有的瀏覽器上還是被記住了用戶(hù)名跟密碼,請(qǐng)問(wèn)有沒(méi)有更有效及簡(jiǎn)便的方法來(lái)防止瀏覽器記住用戶(hù)名及密碼2013-04-04基于JavaScript實(shí)現(xiàn)瀑布流布局
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)瀑布流布局,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08