1. 实现一个sleep函数一秒后console.log一次
<html>
<head>
<title>HELLO</title>
</head>
<body>
<h1>HELLO</h1>
<script>
const sleep = async (seconds) => new Promise((resolve) => setTimeout(resolve, seconds * 1000))
const hello = async () => {
await sleep(2)
console.log(1)
}
hello()
</script>
<h5>HELLO</h5>
</body>
</html>
2. 写出下列内容打印的顺序
<html>
<head>
<title>HELLO</title>
</head>
<body>
<h1>HELLO</h1>
<script>
console.log(1);
setTimeout(() => {
console.log(2);
}, 1000);
console.log(3);
Promise.resolve().then(() => {
console.log(4);
})
console.log(5);
</script>
<h5>HELLO</h5>
</body>
</html>
3. 写出下列内容打印的顺序
<html>
<head>
<title>HELLO</title>
</head>
<body>
<h1>HELLO</h1>
<script>
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3);
});
}, 0);
setTimeout(() => {
console.log(4);
}, 1000);
let timer = setInterval(() => {
console.log(5);
clearInterval(timer);
}, 0);
requestAnimationFrame(() => {
console.log(6);
});
document.addEventListener('click', () => {
console.log(7);
});
Promise.resolve().then(() => {
console.log(8);
queueMicrotask(() => {
console.log(9);
});
});
Promise.reject('test').catch(() => {
console.log(10);
}).finally(() => {
console.log(11);
});
queueMicrotask(() => {
console.log(12);
});
const observer = new MutationObserver(() => {
console.log(13);
});
observer.observe(document.body, { childList: true });
async function asyncFn() {
console.log(14);
await Promise.resolve();
console.log(15);
}
asyncFn();
console.log(16);
</script>
<h5>HELLO</h5>
</body>
</html>
4. 以下y和x分别输出什么
const y = (() => {
let x = 1
return x
})()
setTimeout(() => console.log(3), 1000)
Promise.resolve().then(() => console.log(4))
console.log(x)
console.log(y)
5. 以下y和x分别输出什么
const y = (() => {
let x = 1
return x
})()
console.log(x)
console.log(y)
setTimeout(() => console.log(3), 1000)
Promise.resolve().then(() => console.log(4))
6. 以下y和x分别输出什么
const y = (() => {
let x = 1
return x
})()
setTimeout(() => {
console.log(3)
Promise.resolve().then(() => console.log(6))
}, 1000)
setTimeout(() => console.log(5), 1000)
Promise.resolve().then(() => {
console.log(4)
setTimeout(() => {
console.log(7)
Promise.resolve().then(() => console.log(8))
}, 1000)
})
console.log(x)
console.log(y)
7. 一行代码实现sum(2)(3)(4)(5)方法
8. 请实现el-input组件，支持v-model属性
<el-input v-model="input" />
<template>
<input
class="el-input__inner"
:value="modelValue"
@input="handleInput"
/>
</template>
<script setup>
const props = defineProps({
modelValue: {
type: [String, Number],
default: ''
},
})
const emit = defineEmits(['update:model-value'])
const handleInput = (e) => {
const newValue = e.target.value
emit('update:model-value', newValue)
}
</script>
<style scoped>
</style>
9. Vue3项目如何实现图片懒加载
www.npmjs.com/package/vue…
10. pm2如何开机自启动
pm2 start index.js
pm2 save
pm2 startup
systemctl start pm2-root
systemctl status pm2-root
11. 浏览器禁用JS后如何给提示
<noscript>
<div>
<h2>⚠️ 检测到您的浏览器已禁用JavaScript</h2>
<p>本网站部分功能需要启用JavaScript才能正常使用，否则将无法浏览完整内容、完成交互操作</p>
<p>✅ 开启指引：浏览器设置 → 隐私与安全 → 开启JavaScript功能，刷新页面即可恢复正常</p>
</div>
</noscript>
12. 以下代码进来会加载几张图，为什么
<html>
<head>
</head>
<body>
<div>
<img src="https://placeholder.im/300x2000/cccccc" loading="lazy">
</div>
<div>
<img src="https://placeholder.im/300x2001/cccccc" loading="lazy">
</div>
</body>
</html>
13.less如何定义和运用变量
@width: 100px;
@height: @width + 100px;
#header {
width: @width;
height: @height;
}
14. 以下内容打印什么，为什么
(function x(){
console.log(x)
})()
x = 1
15. 以下内容打印什么，为什么
(function hello(){
console.log(x)
})()
x = 1
16. Less如何定义混入
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.hello {
.flex-center();
color: red;
}
17. @hello: 1 + 2px - 3cm; 在less中，hello的结果是什么，为什么
-110.38582677px
18. sass和scss的关系是什么
1. 两者语法不同，sass用的是缩减的语法，scss用的是css的语法
2. scss是sass预处理器的首选语法，是3.0版本的语法
19. ts如何为字符串变量设置类型
const hello: string = "world"
console.log(hello)
20. ts如何为对象变量设置类型
const hello: { a: number, b: number } = { a: 1, b: 2 }
console.log(hello)
21. ts如何为函数参数设置类型
const hello = (world: number) => {}
console.log(hello(2))
22. ts如何为函数返回值设置类型
const hello = (): number => 1
console.log(hello())
23. ts如何为数组变量设置类型
const hello: [string, number] = ["hello", 1]
console.log(hello)
24. ts如何为二维数组变量设置类型
type helloType = [string, number]
const hello: helloType[] = [["hello", 1], ["world", 2]]
console.log(hello)
25. ts如何为三维数组变量设置类型
type helloType = [string, number]
const hello: helloType[][] = [
[
["hello", 0],
["world", 1]
],
[
["hello2", 0],
["world2", 1]
]
]
26. ts如何配置泛型
interface helloInterface<T> {
status: number,
data: T,
msg: string
}
interface worldInterface {
a: number
}
const hello: helloInterface<worldInterface> = {
status: 0,
data: {
a: 1
},
msg: ''
}
27. ts如何使用或者
interface helloInterface {
status: number,
data: [] | {},
msg: string
}
const hello: helloInterface = {
status: 0,
data: {
a: 1
},
msg: ''
}
28. 如何水平和垂直居中
.box {
display: flex;
align-items: center;
justify-content: center;
}
29. 文字如何水平居中
.text {
text-align: center;
}
30. 文字如何垂直居中
.text {
line-height: 100px;
}
31. ts如何定义数组内有对象
interface helloInterface {
status: number,
data: {
a: number
}[],
msg: string
}
const hello: helloInterface = {
status: 0,
data: [
{
a: 1
}
],
msg: ''
}
32. ts如何设置对象的可选
interface helloInterface {
id: number;
name?: string;
}
const hello: helloInterface = {
id: 1,
name: '',
}
33. 以下代码输出什么
function b() {
console.log(this.a);
}
const obj = {
a: 1,
b: b
}
const a = "HELLO WORLD";
setTimeout(obj.b, 1000);
34. 以下代码输出什么
function b() {
console.log(this.a);
}
var obj = {
a: 1,
b: b
}
var a = "HELLO WORLD";
setTimeout(obj.b, 1000);
35. linux命令题：mkdir ... 是什么意思
在当前目录创建名称为..的隐藏目录
36. linux如何设置可以防止文件被删除
chattr +i hello
37. 以下两种不同位置的transition写法有什么区别吗
<html>
<head>
<style>
p {
color: red;
text-align: center;
transition: color 10s;
}
p:hover {
color: blue;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
p:hover {
color: blue;
transition: color 10s;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
