网站首页 > 技术文章正文

前端进阶打卡题目汇总，赶紧码住

hmc789 2024-11-18 13:02:15 技术文章 3 ℃

第一天

1.用js写一个随机生成指定字符串的方法。

2.给定一个span标签，用纯css并且用3种方式实现一个三角形。

第二天

1.用至少3种方式实现数组去重。

2.给定一个div标签，用纯css实现一个水波动画(2种方法)。

（用::before和::after伪对象也可以实现）

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

第三天

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实现一个进度条动画

用css3实现惊艳面试官的背景即背景动画（高级附源码）

第九天

1. 用js计算斐波那契数列的第n项

2. 用css画一个扇形

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

第十天

1. 解释一下在js里，0.1+0.2为什么等于0.30000000000000004，如何通过代码解决这个问题？

原文链接：https://mp.weixin.qq.com/s/kqk7ZUNvUp0EDvVNYpq8yw
作者：趣谈前端

上一篇：有趣的 CSS 数学函数
下一篇： css 3D transform 感性理解

网站首页 > 技术文章 正文

前端进阶打卡题目汇总，赶紧码住

猜你喜欢

网站首页 > 技术文章正文