![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 81
无知的圆
这个作者很懒,什么都没留下…
展开
-
JS常用的循环遍历和它们的特性
目录JS常用的循环遍历for、forEach、for ...of for…insome everyfilter、mapfind、findIndexreduce、reduceRight参考文章JS常用的循环遍历for、forEach、for …of for…infor通常用于数组的循环 可以随时跳出循环,用break或者continueconst list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11];let len = list.length;for原创 2021-08-19 12:07:26 · 285 阅读 · 0 评论 -
[学习笔记]TypeScript学习笔记
文章目录1 前期准备工作1.1 TypeScript的简介1.2 TypeScript与JavaScript的关系1.3 TypeScript的优点1.4 TypeScript开发环境搭建2 基本类型2.1 类型声明2.2 基本类型种类3 编译选项3.1 自动编译文件3.2 自动编译整个项目4 用webpack配置TS5 Babel6 面向对象6.1 前言6.2 类(class)6.3 面向对象的特点6.4 接口6.5 泛型(Generic)项目实战代码地址参考1 前期准备工作1.1 TypeScrip原创 2021-07-01 21:22:46 · 509 阅读 · 1 评论 -
用TypeScript写一个简单的贪吃蛇小游戏
文章目录前言1 项目界面搭建2 完成Food类3 计分盘(ScorePanel)类4 Snake类的编写5 游戏控制器类(GameControl)项目效果项目地址前言这个项目是参考尚硅谷TypeScript教程写的,自己做了一些改进,目的是为了练习TypeScript的写法,学会用TS的思维去写代码。1 项目界面搭建html结构<body> <!--创建游戏的主容器 --> <div id="main"> <!--原创 2021-07-01 21:21:00 · 400 阅读 · 1 评论 -
【学习笔记】Axios学习笔记
文章目录1 axios的理解和使用1.1 axios是什么?1.2 axios的特点1.3 axios常用语法2 axios源码分析2.1 源码目录结构2.2 源码分析2.2.1 axios与Axios的关系2.2.2 instance 与 axios 的区别?2.2.3 响应拦截器的执行顺序问题2.2.4 axios 运行的整体流程?2.2.5 axios 的请求/响应拦截器是什么?2.2.6. axios 的请求/响应数据转换器是什么?2.2.7 response 的整体结构2.2.8 error 的整原创 2021-07-01 18:51:15 · 300 阅读 · 0 评论 -
【学习笔记】Promise的学习笔记
文章目录1 Promise的理解1.1 promise是什么1.1.1理解:1.1.2 异步编程的例子1.2 为什么要使用Promise1.2.1 指定回调函数的方式更加灵活1.2.2 支持链式调用,可以解决回调地狱问题1.3 Promise 的状态1.4 Promise 对象的值1.5 promise的基本流程2 Promise的使用2.1 API2.2 Promise的几个关键问题3 自定义(手写)Promise4 async 与 await4.1 MDN文档4.2 async函数4.3 await表达原创 2021-07-01 18:37:52 · 170 阅读 · 0 评论 -
【学习笔记】React拓展学习笔记
文章目录1. setState2 lazyLoad3 Hooks3.1 React Hook / Hook是什么?3.2 三个常用的Hook3.3 State Hook3.4 Effect Hook3.5 Ref Hook4 Fragment5 Context6 组件优化7 render props8 错误边界9 组件通信方式总结9.1 组件间的关系9.2 几种通信方式:9.3 比较好的搭配方式1. setStatesetState更新状态的2中写法setState(stateChange, [c原创 2021-07-01 18:32:04 · 149 阅读 · 0 评论 -
【学习笔记】Redux学习笔记
文章目录1 Redux理解1.1 学习文档1.2 Redux是什么1.3 什么情况下需要使用Redux1.4 Redux工作流程2 Redux的三个核心概念2.1 Action2.2 Reducer2.3 Store3 Redux的核心API3.1 createstore()3.2 store 对象3.3 applyMiddleware()3.4 combineReducer()4 redux异步编程4.1 理解4.2 说明5 react-redux5.1 理解5.2 原理图5.2 react-Redux两原创 2021-07-01 18:27:08 · 175 阅读 · 0 评论 -
【学习笔记】React+React全家桶学习笔记
文章目录1 为什么要使用React2 React的定义3 React的三大特性4 React入门4.1 hello_react4.2 虚拟DOM的创建4.3 JSX4.4 模块与组件,模块化与组件化的理解5 React面向组件编程5.1 基本理解和使用5.2 组件实例的三大核心属性5.2.1 state5.2.2 props5.2.3 ref5.3 React中的事件处理5.4 React中收集表单数据5.4.1 非受控组件与非受控组件5.5 组件的 生命周期5.5.1 效果5.5.2. 挂载与卸载5.5.原创 2021-06-29 16:49:02 · 1281 阅读 · 0 评论 -
HTML+CSS动态显示表单栏位标题
实现效果建构一个模拟的“登入表单”,有一个用户名称和密码两个输入框,输入框里有一个浅灰色的标题,当聚焦到输入框时,该标题就会移动到输入框之外并显示为深色,当失去焦点时,标题回到输入框并恢复浅灰色。而当输入框里有文字时,失去焦点时标题文字就会自动隐藏。当密码输入框内输入密码以后,右边就会出现一个登入的按钮实现方法建构表单的HTML代码与CSS代码处理输入框标题在聚焦与失焦的位置在栏位输入文字后将标题隐藏,以及显示登入按钮代码<!DOCTYPE html><ht原创 2021-03-06 18:11:49 · 416 阅读 · 0 评论 -
CSS聚光灯效果制作
原理将两个文字完全重合【一前一后】,同时设置两种不同的颜色【一个底色和一个要展示的颜色,】,然后再将前面的文字套用圆形遮罩,最后加上CSS Animation即可可以加入背景图片,然后将文字作为遮罩代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-03-03 17:39:26 · 260 阅读 · 1 评论 -
使用HTML+CSS制作动态Hamburger Menu
Hamburger Menu即我们日常在手机上浏览网页时,左上角或右上角有两到三条线的图标,如下图所示原创 2021-02-24 11:39:34 · 1147 阅读 · 0 评论 -
HTML+CSS制作翻牌效果
预计效果但鼠标移动到相应的卡牌的时候,卡牌会自动翻转过去;当鼠标移走时,卡牌会自动盖上结构分析正面和背面分别用两个div显示,长度和宽度设置相同,使之完全重叠,这样就可以将position属性设置为absolute,即可以将两个div重叠在一起。运用CSS的transform属性,用rotate将其旋转过来【 旋转方向以空间直角坐标系为参考,即垂直旋转沿Y轴方向,transform的设定值为rotateY()】backface-visibility的设定(用控制HTML 元素的“背原创 2021-02-23 11:47:06 · 1425 阅读 · 1 评论