前端定时器

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

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 = thisthis.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;}}

这是我从自己封装的一个定时器的组件拆出来给大伙看的。小心了哦~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！