前端进阶第5周打卡题目汇总

由于最近有很多朋友问我如何入门和进阶前端，以及如何提高自己的javascript水平，为了认真回答这个问题并提高执行力，本人特地建了一个前端学习打卡群，每天会定期分享工作中常见的问题和笔试，面试题，以此来提高大家对前端的掌握程度。（感兴趣的可以加我进群哦）

不知不觉打卡群已经坚持一个多月啦，希望能持续更长的时间，帮助更多的朋友提高前端水平。接下来赶快进入正题，总结一下第五周的打卡笔记。

第一天

1.用css实现单行文本溢出省略以及多行文本溢出省略

2.用css实现一个音乐抖动条

css实现扇形可以用伪类矩形旋转一个角度,来遮挡父容器的圆形,父容器溢出隐藏

第二天

1. 写出3种js数组去重的方法,并求出效率最高的一种(10万条数据下的测试结果）

2.用css实现单行文本溢出省略以及多行文本溢出省略

第三天

第四天

1. js实现数组中的最大差值

2. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

当我们设置某个元素的属性float为left或者right时，会出现浮动，浮动元素不在文档流，所以文档流的物理位置表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1.父元素的高度无法被撑开，影响与父元素同级的元素

2.与浮动元素同级的非浮动元素（内联元素）会跟随其后

3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1.父级div 定义height

2.最后一个浮动元素后加空div 标签并添加样式clear:both

3.包含浮动元素的父标签添加样式overflow 为hidden 或auto

4.父级div 定义zoom

5.伪对象clear 或者display:table + clear

第五天

第一题

使用CSS3实现一个3D立方体轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 120px auto;
            transform-style: preserve-3d;
            transform: rotateX(-5deg) rotateY(45deg);
            transform-origin: 250px 250px 250px;
            animation: rotate 6s infinite;
        }
        .container .page {
            position: absolute;
            width: 500px;
            height: 500px;
            text-align: center;
            line-height: 500px;
            color: #fff;
            background-size: cover;
        }
        .container .page:first-child {
            background-image: url(./01.png);
            background-color: rgba(0,0,0,.2);
        }
        .container .page:nth-child(2) {
            transform: rotateX(90deg);
            transform-origin: 0 0;
            transition: transform 10s;
            background-color: rgba(179, 15, 64, 0.6);
            background-image: url(./02.png);
        }

        .container .page:nth-child(3) {
            transform: translateZ(500px);
            background-color: rgba(22, 160, 137, 0.7);
            background-image: url(./03.png);
        }

        .container .page:nth-child(4) {
            transform: rotateX(-90deg);
            transform-origin: -500px 500px;
            background-color: rgba(210, 212, 56, 0.2);
            background-image: url(./04.png);
        }
        .container .page:nth-child(5) {
            transform: rotateY(-90deg);
            transform-origin: 0 0;
            background-color: rgba(201, 23, 23, 0.6);
            background-image: url(./02.png);
        }
        .container .page:nth-child(6) {
            transform: rotateY(-90deg) translateZ(-500px);
            transform-origin: 0 300px;
            background-color: rgba(16, 149, 182, 0.2);
            background-image: url(./04.png);
        }

        @keyframes rotate {
            0%, 20% {
                transform: rotateX(-5deg) rotateY(45deg);
            }
            30%, 45% {
                transform: rotateX(-5deg) rotateY(105deg);
            }
            55%, 70% {
                transform: rotateX(-5deg) rotateY(195deg);
            }
            85%, 100% {
                transform: rotateX(-5deg) rotateY(285deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page">A</div>
        <div class="page">B</div>
        <div class="page">C</div>
        <div class="page">D</div>
        <div class="page">E</div>
        <div class="page">F</div>
    </div>

    
</body>
</html>

</article>

第二题

使用JS实现一个获取浏览器URL中指定参数值的方法

第三题

从级联数据中，写一个通用公式，获取最低层级的路径

前端进阶第5周打卡题目汇总

清除浮动的方式：

推荐