网站建设工作会议上的讲话,城市建设理论研究官方网站,wordpress引用php,广西腾达建设集团有限公司网站使用定时器的规避方法 为了避免定时器误差导致倒计时计算错误#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
