JavaScript使用小插件實現(xiàn)倒計時的方法講解

更新時間：2019年03月11日 15:29:26 作者：小飛俠-2

今天小編就為大家分享一篇關(guān)于JavaScript使用小插件實現(xiàn)倒計時的方法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

CountDown.js

一個用來實現(xiàn)簡單頁面倒計時的輕量級工具

API

CountDown.openTimeCountBySeconds()根據(jù)要計時的秒數(shù)打開一個顯示剩余時間的倒計時

參數(shù)：

Ele: 放置倒計時的元素
CountDownSeconds: 要計時的秒數(shù)
Sign: 用于給倒計時設(shè)置標記（可以給多個倒計時設(shè)置同一個標記）
Divider: 分割時分秒的分割符
EndFunc: 倒計時結(jié)束時執(zhí)行的方法

ps:以上均為可選參數(shù)

示例

    CountDown.openTimeCountBySeconds({
      Ele: document.getElementById('h1'),
      CountDownSeconds: 3600,
      Sign: 'flypie',
      Divider: ':',
      EndFunc: function () {
        console.log('end');
      }
    });

CountDown.openTimeCountByStartAndEndDate()根據(jù)計時開始和結(jié)束時間打開一個顯示剩余時間的倒計時

參數(shù)：

Ele: 放置倒計時的元素
StartDate: 倒計時開始時間 (date類型)
EndDate: 倒計時結(jié)束時間 (date類型)
Sign: 用于給倒計時設(shè)置標記（可以給多個倒計時設(shè)置同一個標記）
Divider: 分割時分秒的分割符
EndFunc: 倒計時結(jié)束時執(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ù)計時開始和結(jié)束時間打開一個顯示剩余天數(shù)加時間的倒計時

參數(shù)：

Ele: 放置倒計時的元素
StartDate: 倒計時開始時間 (date類型)
EndDate: 倒計時結(jié)束時間 (date類型)
Sign: 用于給倒計時設(shè)置標記（可以給多個倒計時設(shè)置同一個標記）
Divider: 分割時分秒的分割符
DateDivider: 天數(shù)和時間之間的分隔符
EndFunc: 倒計時結(jié)束時執(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ù)標記零時暫停一個倒計時