- 博客(27)
- 收藏
- 关注
RSS订阅原创 css(4)animation动画总结
文章目录前言一、@keyframes关键帧1.from{}to{}2.0%{}100%{}二、animation动画1.animation-name2.读入数据总结前言学好css3的动画animation属性很重要，我们可以做到许多类似的效果（平移，旋转，缩放）参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation一、@keyframes关键帧通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序
2021-01-15 09:27:01
381
2
原创 css(3)grid网格布局总结
文章目录前言一、display:grid二、grid网格模型（在父元素设置）1.显式网格属性1.grid-template-columns2.grid-template-rows3.grid-template-areas2.隐式网格属性1.grid-auto-columns2.grid-auto-rows3.grid-auto-flow3.间距属性1.grid-gap1.grid-row-gap2.grid-column-gap三、在子元素设置1.grid-area总结前言网格布局也是比较常用的布局.
2021-01-12 14:46:10
356
原创 css(2)flex弹性布局总结
文章目录前言一、display:flex二、弹性盒子模型一、css弹性属性1.引入库二、alignment对齐属性2.读入数据总结前言布局这块，一直有点不是很熟，还是得做一个详细的总结一、display:flex在flex布局下，元素活动类似于块元素，其布局参考弹性盒子模型二、弹性盒子模型在弹性盒子模型的布局中，我们通常运用弹性属性合理规定子元素的形状，并且能有效避免子元素溢出。除此之外我们还运用对齐属性影响布局。一、css弹性属性1.引入库二、alignment对齐属性代码如下（.
2021-01-11 18:10:15
228
1
原创 css(1)选择器总结
文章目录前言一、什么是选择器二、选择器分类1.基本选择器1.元素选择器2.id选择器3.class选择器4.适配选择器2.复合选择器1.交集选择器2.并集选择器3.关系选择器1.子元素选择器2.后代元素选择器3.兄弟元素选择器4.所有兄弟元素选择器4.属性选择器1.选择含有指定属性的元素2.选择含有指定属性和属性值的元素5.伪选择器1.伪类选择器1.选择第一个元素2.选择最后一个元素3.选择第n个元素4.排除元素总结前言css可以说是前端里面又爱又恨的一门学问。掌握的好自然不用说，掌握不好：居中问题，
2021-01-07 16:17:48
176
原创 React自由练习系列(1)：可筛选表单
文章目录前言一、目标二、运用知识点三、实现效果四、使用JSON素材/格式五、页面代码总结前言主要运用到的是React脚手架+antd文章是作者的react个人练习，一直觉得单页面设计也是一个学问，但是苦于思索想做的页面是什么。所以我记下自己练手的一些单页面，作为一个自由练习系列，也可以供大家可以参考。如果本文对你有帮助请点赞????收藏⭐！作者后续还会出这个系列！一、目标完成一个数据表格，表格内的值都是以json方式储存，除开正常的显示功能，还需要做到简单的筛选功能ps：前端页面筛选功能
2020-12-28 09:57:21
798
原创 简易入门git：本地上传代码入GitHub仓库
文章目录前言一、在git操作之前1.安装git2.注册GitHub3.创建GitHub远程仓库4.创建本地文件夹二、git简易原理说明三、git上传代码四、如果需要修改文件1.引入库2.读入数据总结前言是否曾经个日日夜夜，心心念念。想要把自己写的代码上传到GitHub却又困于不会使用git。本文记录了如何使用git上传到GitHub，每一步都十分详细，并配有截图！！！看到就是赚到！点赞????收藏⭐走起来！一、在git操作之前1.安装git2.注册GitHub3.创建GitHub远程仓库
2020-12-11 13:16:24
260
原创 JavaScript包安装错误/失败的解决
很多时候我们在使用JavaScript的npm安装包的时候会出错。我们应该知道，1.包文件都存储在node_modules文件夹。2.package.json相当于是我们查看已安装的包的目录因此在出错时，我们可以直接删除node_modules文件夹，然后在terminal终端使用npm install，就能再次安装包了...
2020-12-04 09:22:44
791
原创 学习JavaScript（9）AJAX请求报文响应报文
文章目录前言一、http请求报文二、http响应报文总结前言根据前文结果使用控制台查看ajax请求的结果学习JavaScript（8）AJAX请求方法学习JavaScript（7）node简易后端创建一、http请求报文可以通过浏览器控制台F12的network看到请求的信息，其中有请求行，请求头，请求空行，请求体进一步放大内容可以找到具体信息请求行的内容包括：URL，请求方法(get/post)等等请求头的内容包括：local-host，user-agent等等请求体的内容：
2020-12-01 14:57:49
444
原创 学习JavaScript（8）AJAX请求方法
文章目录前言请求方法1、原生JavaScript2、jQuery3、axios4、fetch()总结前言文章的ajax请求需要用到node创建的后端，一些ajax知识也可以参考学习JavaScript（2）AJAX基础学习JavaScript（7）node简易后端创建请求方法这里用的后端是前文创建的9000端口，需要配置说明可以参考前文学习JavaScript（7）node简易后端创建1、原生JavaScript原生JavaScript需要以下几步重要操作，包括在绑定事件时对于read
2020-12-01 14:51:01
225
原创 学习JavaScript（7）node简易后端创建
文章目录前言一、安装node二、express框架构建1、express安装2、nodemon安装三、简易后端创建四、启动服务器总结前言关于ajax的请求需要做node的后端服务端准备操作如下一、安装nodenode到官方网站下载http://nodejs.cn/二、express框架构建1、express安装在目录下安装node初始化：npm init -yesexpress安装：npm i express2、nodemon安装也可以不用安装，安装nodemon是能在修改代码
2020-12-01 10:53:30
154
原创 js刷leetcode的函数/方法
文章目录前言一、常用函数1.Math库1.Math.max()2.栈方法二、常用语法1.展开语法（...）2.箭头函数2.读入数据总结前言记录以下刷题时常用的函数，能够有效提高刷题的效率。持续更新中。。。一、常用函数1.Math库1.Math.max()console.log(Math.max(1,2)) //22.栈方法二、常用语法1.展开语法（…）可以在函数调用数组构造时，将对象表达式按照key-value展开function sum(x,y,z){ return x+y+
2020-11-24 11:49:51
422
原创 学习JavaScript（6）JSON
文章目录前言一、JSON是什么？二、JSON语法1.简单值2.对象3.数组三、JSON和JavaScript对象相互转化1.JSON.stringify()2.JSON.parse()总结前言参考红宝书JavaScript高级程序设计第三版一、JSON是什么？JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据。需要注意的是JSON不是一种编程语言二、JSON语法JSON语法可以表示以下三种类型的值1.简单值语法与JavaScript.
2020-11-17 09:53:26
84
原创 学习JavaScript（5）继承
文章目录前言一、原型链总结前言OO语言都支持两张继承方式：接口继承和实现继。接口继承只继承方法签名，而实现继承则继承实际的方法。由于函数没有签名，ECMAscript只能支持实现继承，而且其实现继承主要是依靠原型链来实现一、原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。回顾：构造函数和原型的实例关系是：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针原型链：我们让原型对象等于另一个类型的实例，那么此时原型对象将
2020-11-13 16:20:06
66
原创 学习JavaScript（4）AJAX跨域
文章目录前言一、html文档1.创建一个html文档，用js写ajax请求二、Nginx配置1.Nginx下载2.解压zip3.找到nginx.conf4.修改nginx.conf5.运行Nginx6.查看是否运行三、打开网址1.在本地地址打开总结前言学习JavaScript（2）AJAX基础我们在学习AJAX时难免需要跨域请求服务器。然而我们往往有时无法同时设置后端和前端来调整同源策略。这里我使用Nginx代理服务器做跨域AJAX请求一、html文档1.创建一个html文档，用js写aja
2020-11-11 15:23:05
96
原创 学习JavaScript（3）创建类
文章目录前言一.工厂模式二.构造函数模式三.原型模式四.组合使用构造函数模式和原型模式总结前言学习JavaScript（1）关于对象参考红宝书JavaScript高级程序设计第三版第六章虽然object构造函数或对象的字面量都可以用来创建单个对象，但这些方法有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码，为解决这个问题，有以下几种常用方式创建对象一.工厂模式一种函数，使用它来封装以特定接口创建对象的细节function cat(name,year,color){
2020-11-09 13:22:07
106
原创 学习JavaScript（2）AJAX基础
文章目录前言一、关于AJAX二、AJAX请求数据方法1.XMLHttpRequest(XHR)2.Dynamic script tag insertion 动态脚本注入3.Multipart XHR三、AJAX请求方法四、AJAX请求验证实例总结前言内容参考高性能JavaScript一书和网上资料查找一、关于AJAXAJAX全名asynchronous JavaScript and XML 意为异步的JavaScript和XML。它可以通过延迟下载体积较大的资源文件来使得页面加载速度更快。通过异
2020-11-06 17:26:55
107
原创 学习JavaScript（1）关于对象
文章目录前言二、创建对象的方法1.工厂模式2.构造函数模式3.原型模式4.组合构造&&原型模式5.动态原型模式6.寄生构造函数模式7.稳妥构造函数模式总结前言文章参考红宝书JavaScript高级程序设计# 一、解决对象的方法二、创建对象的方法1.工厂模式工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程。在ECMAscript中无法创建类，于是就发明了一种函数，用函数来封装以特定接口创建对象的细节2.构造函数模式3.原型模式4.组合构造&
2020-11-06 11:47:53
793
1
原创 使用React创建轮播图（4）实时跟踪
文章目录前言一、目标功能二、优化内容三、实现方法四、完整代码五、效果展示总结前言使用React创建轮播图（1）框架+自动跳转使用React创建轮播图（2）小按钮使用React创建轮播图（3）拖拽+优化代码一、目标功能实现跟踪小按钮，通过每一次切换页面，底部的小按钮会显示当前页面的位置二、优化内容1）优化代码，将一些重复的同类样式，通过js的方法创建相同节点2）使用import引入图片，图片位于相同的路径下三、实现方法通过两个函数renderDot(),creatPic(),通
2020-11-03 18:04:31
294
原创 使用React创建轮播图（3）拖拽+优化代码
文章目录前言一、目标功能二、优化内容三、实现方法四、完整代码五、效果展示总结前言使用React创建轮播图（1）框架+自动跳转使用React创建轮播图（2）小按钮一、目标功能在前言两次修改的基础上再次添加拖拽功能拖拽功能(1)：实施跟踪拖动：当鼠标拖动时，图片移动的距离与鼠标滑动的距离相等(2)：判断滑动区域功能：当鼠标取消点击时，如果拖动距离没有超过图片宽度一半距离则还原，如果超过宽度一半距离，则切换向右/向左(3)：离开目标区域还原：当鼠标离开轮播图时，图片还原到原先位置二、优化
2020-10-30 20:54:41
556
原创 使用React创建轮播图（2）小按钮
文章目录前言一、目标功能二、实现方法1.添加渲染内容2.添加css样式内容三、完整代码四、效果展示总结前言使用React创建轮播图（1）框架+自动跳转一、目标功能在前言(1)的基础上添加小按钮功能1.关于左右切换小按钮：在原先自动切换的功能上(我使用的是将left的数据存入state数组中保存然后调用)，再加上向左切换的函数2.关于指定页面小按钮：通过onClick事件修改对应数组的元素位置二、实现方法1.添加渲染内容代码如下：render(){ return(
2020-10-29 14:07:11
631
原创 React操作失误笔记
React操作失误笔记前言问题1.未绑定就引用有this的函数2.重复渲染总结前言一些我在学习React里的操作失误问题1.未绑定就引用有this的函数TypeError: Cannot read property ‘timer’ of undefined以下是使用onMouseOut引用out函数<div className="big" onMouseOut={this.out} onMouseOver={this.over}>问题：未使用bind绑定事件，修改方法(1
2020-10-27 18:32:17
123
原创 使用React创建轮播图（1）框架+自动跳转
使用React创建轮播图（1）文章目录使用React创建轮播图（1）前言一、目标功能二、实现方法1.创建rander渲染内容2.添加css样式内容3.自动轮播实现方法三.完整代码总结前言使用js创建轮播图使用工厂模式封装js轮播图一、目标功能在本系列的轮播图设计中，首先需要实现的是轮播图的大体框架，并且添加轮播图的基础功能(自动翻页，鼠标区域内暂停）二、实现方法与之前使用js写的寻找节点的方法不同，我们在react的render()里渲染元素为DOM1.创建rander渲染内容依然
2020-10-27 11:17:03
672
原创 leetcode滑动窗口方法
leetcode滑动窗口方法一、题目链接二、实现思路三、完整代码总结一、题目链接剑指 Offer 57 - II. 和为s的连续正数序列输入一个正整数 target ，输出所有和为 target 的连续正整数序列（至少含有两个数）例如：输入：target=9输出：[[2,3,4],[4,5]]二、实现思路滑动窗口就是利用一个区间内的数字1.通常是左开右闭。2.目标值是区间内值的相加。这里设定左右（头尾）两个指针。初始设定从1开始，然后接下来根据情况左右移动。3.右边的指针应该有最大值
2020-10-24 18:57:04
148
原创 leetcode位运算小技巧
leetcode位运算小技巧一、原题目链接二、使用方法面试题 05.07. 配对交换476. 数字的补数191. 位1的个数总结一、原题目链接1.面试题 05.07. 配对交换2.476. 数字的补数3.191. 位1的个数二、使用方法面试题 05.07. 配对交换交换数字的奇数偶数位（位0与位1交换，位2与位3交换，以此类推）例如：输入2(10） 输出1（01）输入14（1110） 输出13（1101）方法：0xaaaaaaaa=1010101010101
2020-10-21 17:26:31
172
原创 使用工厂模式封装JavaScript轮播图
使用工厂模式封装js轮播图前言一、功能介绍二、实现方法三、完整代码四、结果展示总结前言具体功能参考https://blog.csdn.net/Echianer/article/details/109173765本文运用工厂模式制作一个模型能够创建两个及以上的轮播图的函数一、功能介绍通过输入轮播图的名字，位置，图片数量，颜色来创建对象二、实现方法这里运用前一篇创建轮播图的代码将其封装成为一个函数，并且使用innerHTML方法写html层和css样式三、完整代码代码如下：<htm
2020-10-20 15:01:58
205
原创 使用JavaScript创建轮播图
使用js创建轮播图一、轮播图功能1.自动轮播功能2.拖拽功能3.小按钮功能二、实现方法1.html创建2.css创建3.js触发事件三、完整代码总结一、轮播图功能1.自动轮播功能鼠标在目标范围外开始自动轮播，当鼠标移动进入目标时停止轮播2.拖拽功能根据鼠标的拖拽能够切换图片的页面3.小按钮功能通过鼠标点击小按钮直接切换到当前目标图片二、实现方法1.html创建html应该是三层的div一层最外层放置外框，是整个轮播图二层是图片的长框，长框的长度应该是几个图片累加起来的长度三层是每张
2020-10-20 09:06:25
353
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人