网站的做代理商,网站联系我们页面设计,首页网站怎么做,西安建百度网站的公司使用定时器的规避方法 为了避免定时器误差导致倒计时计算错误#xff0c;可以采用一些规避方法#xff0c;比如将倒计时被中断时的剩余时间记录下来#xff0c;重新开启定时器时再将这个剩余时间加到新的计算中。同时#xff0c;为了避免定时器延迟#xff0c;可以在每次执…使用定时器的规避方法 为了避免定时器误差导致倒计时计算错误可以采用一些规避方法比如将倒计时被中断时的剩余时间记录下来重新开启定时器时再将这个剩余时间加到新的计算中。同时为了避免定时器延迟可以在每次执行回调函数时记录当前时间戳再计算与上一次执行回调函数的时间差来调整倒计时的时间。
1.子组件templateview classtimeview classred-box {{days10?days:0days}}/viewview classfz-12 color3 stylemargin: 0 2px;天/viewview classred-box {{hours10?hours:0hours}}/viewview classfz-12 color3 stylemargin: 0 2px;时/viewview classred-box{{minutes10?minutes:0minutes}}/viewview classfz-12 color3 stylemargin: 0 2px;分/viewview classred-box{{seconds10?seconds:0seconds}}/viewview classfz-12 color3 stylemargin: 0 2px;秒/view/view
/templatescriptexport default {props: {targetDate: {type: String,required: true}},data() {return {countdownInterval: null,days: 0,hours: 0,minutes: 0,seconds: 0};},mounted() {this.startCountdown();},beforeDestroy() {clearInterval(this.countdownInterval);},methods: {startCountdown() {this.updateCountdown(); // 先立即更新一次this.countdownInterval setInterval(() {this.updateCountdown();}, 1000);},updateCountdown() {const now new Date();const target new Date(this.targetDate);const duration Math.max(0, target - now) / 1000;this.days Math.floor(duration / 86400);this.hours Math.floor((duration % 86400) / 3600);this.minutes Math.floor((duration % 3600) / 60);this.seconds Math.floor(duration % 60);if (duration 0) {clearInterval(this.countdownInterval);this.$emit(countdownFinished); // 触发倒计时结束事件}}}};
/script
style langscss scoped.time {margin-top: 4rpx;display: flex;color: #ff0000;font-size: 22rpx;text-align: center;align-items: center;.red-box {font-size: 22rpx;}}.color3{color: #ff0000;font-size: 22rpx;}
/style
