前端定时器

最新推荐文章于 2025-06-26 14:29:18 发布

玉瑶瑶跪键盘

最新推荐文章于 2025-06-26 14:29:18 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript 前端框架

本文链接：https://blog.csdn.net/weixin_57456178/article/details/121859266

本文介绍前端开发中如何实现定时器功能，特别是在商品预售和众筹等场景的应用。提供了一个从实际项目中拆解出来的定时器组件示例，帮助开发者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端定时器，对商品预售，众筹等功能的开发中，一定会用得到的，在这献给大家：

data(){
	return {
		d: '00', // 天的默认值
        h: '00', // 小时的默认值
        i: '00', // 分钟的默认值
        s: '00', // 秒的默认值
        timer: null ,// 定时器
        seconds: 0, // 记录不停倒计过程中变化的秒数
        timestamp:0,
	}
}

watch: {
        	// 监听时间戳的变化
        	timestamp(newVal, oldVal) {
        		// 如果倒计时间发生变化，清除定时器，重新开始倒计时
        		this.clearTimer();
        		this.start();
        	}
        },

// 倒计时
            start() {
            	// 避免可能出现的倒计时重叠情况
                const vm = this
            	this.clearTimer();
            	if (this.timestamp <= 0) return;
                console.log(this.timestamp)
            	this.seconds = Number(this.timestamp);
            	this.formatTime(this.seconds);
            	this.timer = setInterval(() => {
            		this.seconds--;
            		// 发出change事件
            		this.$emit('change', this.seconds);
            		if (this.seconds < 0) {
            			return this.end();
            		}
                    
            		this.formatTime(this.seconds);
            	}, 1000);
            },
            // 格式化时间
            formatTime(seconds) {
            	// 小于等于0的话，结束倒计时
            	seconds <= 0 && this.end();
            	let [day, hour, minute, second] = [0, 0, 0, 0];
            	day = Math.floor(seconds / (60 * 60 * 24));
            	// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
            	// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
            	hour = Math.floor(seconds / (60 * 60)) - day * 24;
            	// showHour为需要显示的小时
            	let showHour = null;
            	if(this.showDays) {
            		showHour = hour;
            	} else {
            		// 如果不显示天数，将“天”部分的时间折算到小时中去
            		showHour = Math.floor(seconds / (60 * 60));
            	}
            	minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
            	second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
            	// 如果小于10，在前面补上一个"0"
            	showHour = showHour < 10 ? '0' + showHour : showHour;
            	minute = minute < 10 ? '0' + minute : minute;
            	second = second < 10 ? '0' + second : second;
            	day = day < 10 ? '0' + day : day;
            	this.d = day;
            	this.h = showHour;
            	this.i = minute;
            	this.s = second;
            },
            // 停止倒计时
            end() {
            	this.clearTimer();
                this._axiosOther();
            	this.$emit('end', {});
            },
            // 清除定时器
            clearTimer() {
            	if(this.timer) {
            		// 清除定时器
            		clearInterval(this.timer);
            		this.timer = null;
            	}
            }