小程序?qū)崿F(xiàn)倒計時組件的使用示例

更新時間：2023年09月15日 15:15:32 作者：推開世界的門

倒計時是指從一個固定的時間開始,向前推算一段時間,來計算目標時間或剩余時間的過程,本文主要介紹了小程序?qū)崿F(xiàn)倒計時組件的使用示例,具有一定的參考價值,感興趣的可以了解一下

需求背景

要做一個倒計時，可能是天級別，也可能是日級別，時級別，而且每個有效訂單都要用，就做成組件了

效果圖

Sep-14-2023 16-16-49.gif

Sep-14-2023 16-54-44.gif

需求分析

需要一個未來的時間戳，或者在服務(wù)度直接下發(fā)一個未來到現(xiàn)在時間差，我們只需要做倒計時
進入頁面，看是否已經(jīng)結(jié)束，如果沒結(jié)束就調(diào)用倒計時函數(shù)
每隔1000，做時間戳(毫秒) -1000。邊做tick ,邊做時間格式化。
每次調(diào)用前，先清除上一個定時器
組件銷毀的時候，也要清除一下定時器

代碼實現(xiàn)

設(shè)置初始值，也是1秒,這里單位時毫秒

const interval = 1000;

進入頁面，初始化完成。開始判斷是否結(jié)束

lifetimes: {
		ready() {
			this.startCountdown();
		},
		detached() {
			clearTimeout(this.timer);
		},
	},

startCountdown() {
    const lastTime = this.initTime(this.properties.expireTime); // 這一步，如果服務(wù)端返回了未來到現(xiàn)在的差值，則不需要自己計算時間差了
    // 如果最終時間 < 1000ms 說明 已經(jīng)過期了，就不用展示倒計時了.
    if (lastTime > interval) {
    // 格式化要展示的數(shù)據(jù)
    this.defaultFormat(lastTime);
    this.setData({
            isCountOver: true, // 標識可以顯示倒計時
            lastTime, // set lastTime
    });
    // 調(diào)用倒計時函數(shù)，主要的邏輯就是每隔1000ms ,讓lastTime - 1000
        this.tick();
        }
    },

初始化時間：如果服務(wù)度返回了時間差，這一步不用處理

//初始化時間
initTime(expireTime) {
    let lastTime = Number(new Date(expireTime * 1000)) - new Date().getTime();
    console.log('lastTime', lastTime);
    return Math.max(lastTime, 0);
},

時間的格式化處理，這里都是固定代碼，沒什么含量

//默認處理時間格式
defaultFormat(time) {
    const days = 60 * 60 * 1000 * 24;
    const hours = 60 * 60 * 1000;
    const minutes = 60 * 1000;
    const d = Math.floor(time / days);
    const h = Math.floor((time % days) / hours);
    const m = Math.floor((time % hours) / minutes);
    const s = Math.floor((time % minutes) / 1000);
    this.setData({
            d: this.fixedZero(d),
            h: this.fixedZero(h),
            m: this.fixedZero(m),
            s: this.fixedZero(s),
    });
},
// 格式化時間加0
fixedZero(val) {
        return val < 10 ? `0${val}` : val;
},

tick 倒計時函數(shù)

tick() {
    let { lastTime } = this.data;
    this.timer = setTimeout(() => {
    // 每次定時器之前，先把上一個定時器清除
        clearTimeout(this.timer);
    // 如果倒計時結(jié)束，這是結(jié)束的狀態(tài)
            if (lastTime < interval) {
                    this.setData({
                            lastTime: 0,
                            isCountOver: false,
                    });
            } else {
    // 如果倒計時正常，則每次 -1000 ,并且格式化時間。再次調(diào)用tick，直到倒計時結(jié)束
                    lastTime -= 1000;
                    this.setData(
                            {
                                    lastTime,
                            },
                            () => {
                                    this.defaultFormat(lastTime);
                                    this.tick();
                            },
                    );
            }
    }, interval);
    },

完整代碼

父組件(我這里傳了一個比較大的時間戳，2024,10.1結(jié)束的時間戳)

<order-time expireTime="{{ 1727712000 }}">
    <view slot="desc">還剩</view>
</order-time>

子組件 (wxml)

<view wx:if="{{ isCountOver }}" class="timer-wrap">
	<slot name="desc" />
	<view class="reset-time">
		<text wx:if="{{ d != '00' }}"> {{ d }}天</text>
		{{ h }}:{{ m }}:{{ s }}</view
	>
</view>
<view wx:else class="reset-time"> {{ emptyType === '1' ? '已超時': '' }} </view>

子組件 (js)

let interval = 1000;
Component({
	options: {
		multipleSlots: true,
	},
	properties: {
		expireTime: {
			type: String,
		},
		emptyType: {
			type: String,
			value: '1',
		},
	},
	lifetimes: {
		ready() {
			this.startCountdown();
		},
		detached() {
			clearTimeout(this.timer);
		},
	},
	/**
	 * 組件的初始數(shù)據(jù)
	 */
	data: {
		d: 0, //天
		h: 0, //時
		m: 0, //分
		s: 0, //秒
		lastTime: '', //倒計時的時間戳
		isCountOver: false, // 倒計時是否完成
	},
	/**
	 * 組件的方法列表
	 */
	methods: {
		startCountdown() {
			const lastTime = this.initTime(this.properties.expireTime);
			if (lastTime > interval) {
				this.defaultFormat(lastTime);
				this.setData({
					isCountOver: true,
					lastTime,
				});
				this.tick();
			}
		},
		//默認處理時間格式
		defaultFormat(time) {
			const days = 60 * 60 * 1000 * 24;
			const hours = 60 * 60 * 1000;
			const minutes = 60 * 1000;
			const d = Math.floor(time / days);
			const h = Math.floor((time % days) / hours);
			const m = Math.floor((time % hours) / minutes);
			const s = Math.floor((time % minutes) / 1000);
			this.setData({
				d: this.fixedZero(d),
				h: this.fixedZero(h),
				m: this.fixedZero(m),
				s: this.fixedZero(s),
			});
		},
		//定時事件
		tick() {
			let { lastTime } = this.data;
			this.timer = setTimeout(() => {
				clearTimeout(this.timer);
				if (lastTime < interval) {
					this.setData({
						lastTime: 0,
						isCountOver: false,
					});
				} else {
					lastTime -= 1000;
					this.setData(
						{
							lastTime,
						},
						() => {
							this.defaultFormat(lastTime);
							this.tick();
						},
					);
				}
			}, interval);
		},
		//初始化時間
		initTime(expireTime) {
			let lastTime = Number(new Date(expireTime * 1000)) - new Date().getTime();
			console.log('lastTime', lastTime);
			return Math.max(lastTime, 0);
		},
		// 格式化時間加0
		fixedZero(val) {
			return val < 10 ? `0${val}` : val;
		},
	},
});

遇到相關(guān)變量，自己更改即可

到此這篇關(guān)于小程序?qū)崿F(xiàn)倒計時組件的使用示例的文章就介紹到這了,更多相關(guān)小程序倒計時組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: