小程序插件 — 倒計時

往往各大節日蜂擁而至，各大平臺和店鋪就開始大展身手，琳琅滿目的促銷活動隨之而來，這時，就有免不了要出席的一個功能——倒計時。 今天，就爲你們整理開發了一個倒計時插件，今後解決咱們對倒計時的全部需求。

功能設計

能夠知足各類形式的倒計時展現。爲此，插件拋出各個形式參數，進行按需隨意組合。好比，能夠是單個總數形式 —— 距離還剩：years年（或days年 或hours小時 或minutes分鐘 或seconds秒），也能夠是 組合形式 —— 距離還剩：years 年 d 天 h 小時 m 分鐘 s 秒。 完整代碼呈現以下： github分享：github.com/linger777/x…

詳細說明

倒計時的時間段的設置：

• 有兩種屬性：lastTime 和 startTime+endTime 。
• lastTime的優先級較高。
• 單位是毫秒。

回調方法有：

• onYearChange(){}, // 年數變化時回調
• onDayChange(){}, // 天數變化時回調
• onHourChange(){}, // 小時變化時回調
• onMinuteChange(){}, // 分鐘變化時回調
• onSecondChange(){}, // 秒數變化時回調
• onFinish(){}, // 倒計時結束回調

返回的倒計時對象屬性有：

• seconds 秒（總數）
• minutes 分鐘（總數）
• hours 小時（總數）
• days 天（總數）
• years 年數
• d 天（組合）
• h 小時（組合）
• m 分鐘（組合）
• s 秒（組合）

如何使用

1. 引入插件

import TimeCD from '@/plugins/timeCountDown'
複製代碼

2. 調用插件

this.timeCD = new TimeCD({
    startTime: new Date().getTime(),
    endTime: new Date('2020-06-13').getTime(),
    onSecondChange(){
        that.$apply()
    },
    onFinish() {
        console.log('==倒計時結束＝＝＝')
        that.$emit('time end')
    }
})
複製代碼

3. 賦值使用 代碼以下：

<view class="li_plugins">距結束還剩:<text>{{timeCD.years}}</text>年<text>{{timeCD.d}}</text>天<text>{{timeCD.h}}</text>小時<text>{{timeCD.m}}</text>分<text>{{timeCD.s}}</text>秒</view>
複製代碼

展現以下：

這個倒計時插件知足了常見對倒計時的須要，是我在平常實踐中經常使用的一款，推薦給你們使用。