2024年最新Vue做的时间倒计时组件（精确到秒）(1)，Web前端开发面试技能介绍

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

},

refreshCounter: {

type: [Number, String],

default: 0

},

end: {

type: [Number, String],

default: 0

},

isMiniSecond: {

type: Boolean,

default: false

}

},

computed: {

duration() {

if (this.end) {

let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;

end -= Date.now();

return end;

}

const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);

return time;

}

},

mounted() {

this.countDown();

},

watch: {

duration() {

this.countDown();

},

refreshCounter() {

this.countDown();

}

},

methods: {

durationFormatter(time) {

if (!time) return { ss: 0 };

let t = time;

const ss = t % 60;

t = (t - ss) / 60;

if (t < 1) return { ss };

const mm = t % 60;

t = (t - mm) / 60;

if (t < 1) return { mm, ss };

const hh = t % 24;

t = (t - hh) / 24;

if (t < 1) return { hh, mm, ss };

const dd = t;

return { dd, hh, mm, ss };

},

countDown() {

// eslint-disable-next-line no-unused-expressions

this.curTime = Date.now();

this.getTime(this.duration);

},

getTime(time) {

// eslint-disable-next-line no-unused-expressions

this.timer && clearTimeout(this.timer);

if (time < 0) {

return;

}

// eslint-disable-next-line object-curly-newline

const { dd, hh, mm, ss } = this.durationFormatter(time);

this.days = dd || 0;

// this.hours = 00${hh || ''}.slice(-2);

// this.mins = 00${mm || ''}.slice(-2);

// this.seconds = 00${ss || ''}.slice(-2);

this.hours = hh || 0;

this.mins = mm || 0;

this.seconds = ss || 0;

this.timer = setTimeout(() => {

const now = Date.now();

const diffTime = Math.floor((now - this.curTime) / 1000);

const step = diffTime > 1 ? diffTime : 1; // 页面退到后台的时候不会计时，对比时间差，大于1s的重置倒计时

this.curTime = now;

this.getTime(time - step);

}, 1000);

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

[外链图片转存中…(img-VwVbOtxK-1715711183530)]