JavaScript使用小插件實現倒計時的方法講解

2024-05-06 16:48:56

字體：大中小

來源：轉載

供稿：網友

CountDown.js

一個用來實現簡單頁面倒計時的輕量級工具

API

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

參數：

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

ps:以上均為可選參數

示例

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

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

參數：

Ele: 放置倒計時的元素
StartDate: 倒計時開始時間 (date類型)
EndDate: 倒計時結束時間 (date類型)
Sign: 用于給倒計時設置標記（可以給多個倒計時設置同一個標記）
Divider: 分割時分秒的分割符
EndFunc: 倒計時結束時執行的方法

ps:除StartDate,EndDate外均為可選參數

示例

    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()根據計時開始和結束時間打開一個顯示剩余天數加時間的倒計時

參數：

Ele: 放置倒計時的元素
StartDate: 倒計時開始時間 (date類型)
EndDate: 倒計時結束時間 (date類型)
Sign: 用于給倒計時設置標記（可以給多個倒計時設置同一個標記）
Divider: 分割時分秒的分割符
DateDivider: 天數和時間之間的分隔符
EndFunc: 倒計時結束時執行的方法

ps:除StartDate,EndDate外均為可選參數

示例

    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()根據標記零時暫停一個倒計時