“ 时，分，秒” 活动倒计时

在小程序中，使用ES6实现包含“ 时，分，秒” 的活动倒计时。

第一步，fn.js 中封装工具函数

const fn = {

    getTime(time, flag) {
        let t = time / 1000 % 60;
        if (flag === 'h') {
            t = time / 1000 / 60 / 60 % 48;
        } else if (flag === 'm') {
            t = time / 1000 / 60 % 60;
        }
        t = Math.floor(t).toString();
        t = t.length === 1 ? '0' + t : t;
        return t;
    },
   // 参数：当前时间和结束时间
    Countdown({now, endTime, callback = {}}) {
        let t;
        now = now || Date.now();
        let {success, intervalFn} = callback;
        intervalFn = intervalFn || function () {

        };
        let lastTime = endTime - now;
        if (lastTime > 0) {
            intervalFn(fn.getTime(lastTime, 'h'), fn.getTime(lastTime, 'm'), fn.getTime(lastTime, 's'));
            t = setInterval(() => {
                lastTime -= 1000;
                intervalFn(fn.getTime(lastTime, 'h'), fn.getTime(lastTime, 'm'), fn.getTime(lastTime, 's'));
                if (lastTime <= 0) {
                    clearInterval(t);
                    success && success();
                }
            }, 1000);
        } else {
            success && success();
        }
        return t;
    }
};

export default fn;

第二步，使用，小程序页面 index.js 中使调用工具类获取 “时，分，秒”的数值。

import fn from '../../../common/fn.js';

const app = getApp();

let timer = null;

Page({
  
    data: {
       
    },

    // 请求服务端数据，获取 客户端当前时间 和 结束时间
    getData() {
        const self = this;
        api({
            url: '',
            data: {},
            method: 'get'
        })
        .then((res) => {
           timer = fn.Countdown({
                nowTime: now,
                endTime: outDate, callback: {
                    intervalFn: (h, m, s) => {
                        this.setData({
                            lastTime: {h, m, s}
                        });
                    },
                    success: () => {  // 倒计时结束后的回调
                        this.getData();
                    }
                }
            });
        })
        .catch(e => {
           
        })
        .always(() => {
           
        });
    },

    // 性能考虑，页面掩藏或卸载时要清楚定时器
    onHide() {
        timer && clearInterval(timer);
    },

    onUnload() {
        timer && clearInterval(timer);
    }

});

第三步，页面渲染

<view>活动将于 {{lastTime.h}}:{{lastTime.m}}:{{lastTime.s}} 后结束</view>