小程序列表倒计时功能

先看看效果

效果图

直接上代码

js:

Page({
    /**
     * 页面的初始数据
     */
    data: {
        listData: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let list = [
            {
                id: 1,
                memberNickname: '列表1',
                remainTime: 86400000
            },
            {
                id: 2,
                memberNickname: '列表2',
                remainTime: 3226000
            },
            {
                id: 3,
                memberNickname: '列表3',
                remainTime: 15000
            }
        ];
        this.setData({
            listData: list
        });
        this.setCountDown();
    },

    /**
     * 倒计时
     */
    setCountDown: function(){
        let time = 100;
        let { listData } = this.data;
        let list = listData.map((v, i) =>{
            if (v.remainTime <= 0) {
                v.remainTime = 0;
            }
            let formatTime = this.getFormat(v.remainTime);
            v.remainTime -= time;
            v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}.${parseInt(formatTime.ms / time)}`;
            return v;
        })
        this.setData({
            listData: list
        });
        setTimeout(this.setCountDown, time);
    },

    /**
     * 格式化时间
     */
    getFormat: function (msec){
        let ss = parseInt(msec / 1000);
        let ms = parseInt(msec % 1000);
        let mm = 0;
        let hh = 0;
        if (ss > 60) {
            mm = parseInt(ss / 60);
            ss = parseInt(ss % 60);
            if (mm > 60) {
                hh = parseInt(mm / 60);
                mm = parseInt(mm % 60);
            }
        }
        ss = ss > 9 ? ss : `0${ss}`;
        mm = mm > 9 ? mm : `0${mm}`;
        hh = hh > 9 ? hh : `0${hh}`;
        return { ms, ss, mm, hh };
    }
})

wxml:

<view>
    <view class="flex_l_r_c" wx:for="{{listData}}" wx:key="id">
        <view>{{item.memberNickname}}</view>
        <view>{{item.countDown}}</view>
    </view>
</view>