由于最近有很多朋友问我如何入门和进阶前端,以及如何提高自己的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立方体轮播图
<article><!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中指定参数值的方法
第三题
从级联数据中,写一个通用公式,获取最低层级的路径
推荐
趣谈前端
Vue、React、小程序、Node
前端 算法|性能|架构|安全