由于最近有很多朋友问我如何入门和进阶前端,以及如何提高自己的javascript水平,为了认真回答这个问题并提高执行力,本人特地建了一个前端学习打卡群,每天会定期分享工作中常见的问题和笔试,面试题,以此来提高大家对前端的掌握程度。(感兴趣的可以加我进群哦)
好啦,接下来赶快进入正题,总结一下前三周的打卡笔记。
第一天
1.用js写一个随机生成指定字符串的方法。
2.给定一个span标签,用纯css并且用3种方式实现一个三角形。
第二天
1.用至少3种方式实现数组去重。
2.给定一个div标签,用纯css实现一个水波动画(2种方法)。
(用::before和::after伪对象也可以实现)
第三天
1.js实现一个深拷贝和浅拷贝。
2.给定一个div标签,用3种方式实现其子元素水平垂直居中。
【周末福利打卡】
1.用css画一个立方体。
<!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: 300px;
height: 300px;
margin: 120px auto;
transform-style: preserve-3d;
transform: rotateX(-33.5deg) rotateY(45deg);
transform-origin: 150px 150px;
animation: rotate 3s infinite;
}
.container .page {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: #fff;
}
.container .page:first-child {
background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
transform: rotateX(90deg);
transform-origin: 0 0;
transition: transform 3s;
background-color: rgba(179, 15, 64, 0.6);
}
.container .page:nth-child(3) {
transform: translateZ(200px);
background-color: rgba(22, 160, 137, 0.7);
}
.container .page:nth-child(4) {
transform: rotateX(-90deg);
transform-origin: -200px 200px;
background-color: rgba(210, 212, 56, 0.2);
}
.container .page:nth-child(5) {
transform: rotateY(-90deg);
transform-origin: 0 0;
background-color: rgba(201, 23, 23, 0.6);
}
.container .page:nth-child(6) {
transform: rotateY(-90deg) translateZ(-200px);
transform-origin: 0 200px;
background-color: rgba(16, 149, 182, 0.2);
}
@keyframes rotate {
0% {
transform: rotateX(-33.5deg) rotateY(45deg);
}
100% {
transform: rotateX(-33.5deg) rotateY(405deg);
}
}
</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>
2. 用js正则实现去除文本中的html标签。
第五天
1.用promise封装一个自己的ajax库。
思路大致是这样的,你们也可以根据业务自己封装更复杂的ajax库,比如添加请求响应拦截器
2.用css实现footer固定在底部的效果(至少2种方法)。
第六天
1.判断一个字符串中出现次数最多的字符,统计这个次数
2. 对 BFC 规范(块级格式化上下文:block formatting context)的理解
第七天
1.用js实现判断设备类型以及浏览器类型
2. 用至少2种方法实现css定位中fixed(固定定位)的效果
其次,用定位也可以实现。
第八天
1.用js实现一个可以自定义格式的时间函数
2. 用css实现一个进度条动画
第九天
1. 用js计算斐波那契数列的第n项
2. 用css画一个扇形
css实现扇形可以用伪类矩形旋转一个角度,来遮挡父容器的圆形,父容器溢出隐藏。
第十天
1. 解释一下在js里,0.1+0.2为什么等于0.30000000000000004,如何通过代码解决这个问题?