笔试笔记

发表于 | 分类于 ， ，

1.实现如下布局

注意header,footer,content的划分和命名规范，flex布局，和当容器设置为父容器的百分号时，注意设置body和html的 body html{margin:0;height:100%}
代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
    height: 100%;
    display: flex;
    flex-direction: column;
}
html {

    margin:0 auto;

    padding:0;

    height: 100%;

}
.header{

    border: solid 1px green;
    height:100px;
    display: flex;
    justify-content: space-between;
}
.leftLogo{
    margin: 10px 0px 10px 10px;
    width: 80px;
    border: solid 1px red;


}
.rightUserName{
    border: solid 1px black;
    text-align: right;
    width: 100px;
    margin: 60px 10px 0px 0px;
    height: 20px;
}

.content{
    margin-top: 10px;
    display: flex;
    flex-grow: 1;

}
.leftContent{
    flex-grow:1 ;
    border: solid 1px red;
    margin-right: 10px;
}


.aside{
    width:200px;
    height: 20px;
    border: solid 1px red;
    text-align: left;
}
.footer{
    margin-top: 10px;
    border:solid 1px black;
    text-align: center;
    height: 20px;
}
.triangle-down{
    width:0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
    </style>
</head>
<body>
<div class="triangle-down"></div>
</body>
</html>

参考网站
html body设置宽高
flex布局
2.实现如下函数：
uniqueryfy([1,0,0]) 返回[1,0]
uniquerfy([{id:1,name:1},{id:1,name:2}],a => a.id)返回[{id:1,name:1}]
后面是过滤的规则 或者为 a => a.sex + a.name
方法：使用set的方法来做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function uniquery(arr,rules) {
     if(rules == null){ //判断rule为空的情况下
         var set = new Set();
         arr.forEach(function (item,index,arr) {
             if(!set.has(item))
                 set.add(item);
         })
         return Array.from(set);//伪数组的转变 将set转化为数组
     }else{
         //保存key 新的数组来保存所有的key和value
         var set = new Set();
         var newArr = [];
         arr.forEach(function (item,index,arr) {
             var key = rules(item);
             if(!set.has(key)){
                 set.add(key);
                 newArr.push(item);
             }

         })
         return newArr;
     }
 }

3.

三角形的绘制可以通过border来 transparent设置两边为透明即可了。
三角形绘制参考网站
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
.total{
    width:100px;
}
.top{
    background: black;
    color: white;
    width: 100px;
    display: flex;

}
.trangle-down{
    width: 0;
    height: 0;
    border-top: 5px solid white;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-top: 10px;
}
.content-top{
    background: white;
    color: red;
    display: flex;
    width: 100px;
}
.trangle-up{
    width: 0;
    height: 0;
    border-bottom: 5px solid red;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-top: 10px;
}
.content{
    display: none;
}
    </style>

<body>
<div class="total" onmouseleave="closeMenu()">
<div class="top" onmouseenter="opemMenu()">
    客户服务
    <div class="trangle-down"></div>
</div>
<div class="content">
    <div class="content-top">
        客户服务
        <div class="trangle-up"></div>
    </div>

        <div>联系客户</div>
        <div>帮助中心</div>
        <div>联系客户</div>
        <div>联系客户</div>

</div>
</div>

<script>
    function opemMenu() {
        (document.getElementsByClassName("content")[0]).style.display = "block";
    }
    function closeMenu() {
        (document.getElementsByClassName("content")[0]).style.display = "none";
    }
</script>
</body>
</html>

4.实现如下函数，今天是小明生日，他希望知道余下还剩下多少时间，

要求：
1.使用原生js
2.时间格式 时：分：秒
3.自动补全2位，06:06:06
4.过了凌晨12点，时钟自动停止
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<span id = "clock"></span>
<script>
    function PrefixInteger(num, n) {
        return (Array(n).join(0) + num).slice(-n);
    }

   var interval =  setInterval(function () {
        var curDate = new Date(); //获取当前时间
        var nextDate = new Date(curDate.getTime() + 24 * 60 * 60 * 1000);  //获取下一天
        var next = new Date(nextDate.getFullYear(),nextDate.getMonth(),nextDate.getDate());//获取下一天的0时刻
        var time = next - curDate; //求得时间差
        var hours =(parseInt((time %(1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
        var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = parseInt((time % (1000 * 60)) / 1000);
       if(hours == 0 && minutes == 0 && seconds == 0) //如果都为0了 说明到头了 就清除
         clearInterval(interval);
       var str = "";
            str += PrefixInteger(hours, 2) + ":"; //补全
            str += PrefixInteger(minutes, 2) + ":";
            str += PrefixInteger(seconds, 2);

        document.getElementById("clock").innerText = str;
    },1000);
</script>
</body>

5.实现如下页面布局
已知header,footer高度为48px,宽度为100%,aside宽度均为320px,实现该布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>

    html {

        margin:0;

        padding:0;

        height: 100%;

    }
    body{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .header{
        background-color: blue;

        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        flex-grow: 0;
    }
    .footer{
        background-color: blue;

        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        flex-grow: 0;
    }
    .main{

        display: flex;
        flex-grow: 1;
    }
    .aside{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: blue;
        flex-grow: 0;
        width: 320px;
    }
    .content{
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rebeccapurple;
    }
</style>
</head>
<body>
<div class="header">
    header
</div>
<div class="main">
    <div class="aside">
        aside
    </div>
    <div class="content">
        content
    </div>
    <div class="aside">
        aside
    </div>
</div>
<div class="footer">
    footer
</div>
<script>

</script>
</body>
</html>

6.将函数fn的执行上下文改为obj,返回fn执行后的结果

1
2
3
4
5
6
7
8
9
function HelloWorld(fn,obj) {
    return fn.call(obj);
}
HelloWorld(
    function() {
        return this.firstname + '' + this.lastname + '|';
    },
    {firstname:"hello",lastname:"world"}
)

7.实现如下布局

关键是三角形冒泡的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .tag{ width:500px; position:relative;border-radius: 5px}
    .tag em{display:block; border-width:20px; position:absolute; bottom:150px; left:500px;border-style:solid  ; border-color: transparent  transparent transparent white;font-size:0; line-height:0;}

</style>
</head>
<body style="background-color: #666666">
<div style="display: flex">
<div class="tag" style="width: 500px;background-color: white"><h1>《倩女幽魂2.0》来看看我的<br>最新梦岛动态!</h1>
    <em></em>
<div style="display: flex">
<p style="font-size: 25px;color: #999999">上大神，发梦岛，不进游戏也能<br>撩！</p>
<img src="https://nos.netease.com/hi-163-qn/upload/201909/04/ff2e1e80cef611e9a213af01a189a04b.png">
</div>
</div>
<img style="width: 150px;height: 150px;margin-left: 30px" src="https://nos.netease.com/hi-163-qn/upload/201909/04/ff2e1e80cef611e9a213af01a189a04b.png">
</div>
<script>

</script>
</body>
</html>

8.实现如下函数