2024年最新Vue做的时间倒计时组件（精确到秒）(2)，2024年最新面试被吊打

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

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);

}

}

};