uniapp毫秒倒计时

毫秒倒计时

template

<view class="count-down-wrap fcc">
   	<view>{{ countdown }}</view>
</view>

js

<script>
	var unpackTimeId = null;
	var total_micro_second = 0; // 总毫秒数

	export default {
		data() {
			return {
                countdown: ''
            }
        },
        onLoad(options) {
            // 测试
            let currentTime = 1647065671;
            let startTime = 1647069271;
            this.isDiffTime(currentTime, startTime);
        },
        methods: {
           /**
			* @param {Object} current 当前时间
			* @param {Object} start 开奖时间
			*/
            isDiffTime(current, start) {
				let diffTime = start - current;
				
                // 抽奖中： 活动开奖时间 < 当前时间
                if (start < current) {
                    this.activityInfo.flagLottery = 1;
                    return;
                }
					
                // 活动开始倒计时 【秒转为毫秒】
                total_micro_second = diffTime * 1000;
                
                // 开奖倒计时
                this.unpackCountDown();
			},
            /**
             * 开奖倒计时
             * 注意：毫秒时间频率，这里以100ms的频率
             */
            unpackCountDown() {
                // 格式化时间、渲染数据
                this.dateFormat(total_micro_second);
                
                unpackTimeId = setInterval(() => {
                    total_micro_second -= 100;
					
                    // 倒计时结束
                    if (total_micro_second < 0) {
                        clearInterval(unpackTimeId);
                        return;
                    }
                    
                    // 格式化时间
                    this.dateFormat(total_micro_second);
                    
                }, 100)
            },
            /**
             * 格式化时间、处理数据
             * 根据需要封装方法
             */
            dateFormat(micro_second) {
                // 总秒数
                var second = Math.floor(micro_second / 1000);
                var day = Math.floor(second / 3600 / 24); // 天数
                var hr = Math.floor(second / 3600); // 总小时
                // var hrDay = hr % 24; // 小时位
                var min = Math.floor((second - hr * 3600) / 60); // 分
                var sec = (second - hr * 3600 - min * 60); // 秒
                var micro_sec = Math.floor((micro_second % 1000) / 10); // 毫秒，保留2位
				
				// 根据需求返回格式
                // this.countdown = {
				// 	h: formatNumber(hr),
				// 	i: formatNumber(min),
				// 	s: formatNumber(sec),
				// 	ms: formatNumber(micro_sec)
				// };
				
				this.countdown = `${h}时${i}分${s}秒${ms}`;
            },
        }
    }
</script>

export const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}