- 博客(158)
- 收藏
- 关注
RSS订阅原创 案例：仿京东放大镜
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><meta...
2020-04-30 17:29:41
406
原创 案例：鼠标滚轮改变div高度
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...
2020-04-30 17:29:36
484
原创 案例：鼠标拖拽
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahtt...
2020-04-30 17:29:33
309
原创 案例：键盘控制div位置缩放
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp...
2020-04-30 17:29:30
179
原创 案例：下拉菜单
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...
2020-04-30 17:28:58
190
原创 案例：自定义一个右键菜单
（另一种笔记里找）自定义右键菜单-contextmenu右键菜单事件-e.preventDefault()/returnfalse阻止默认事件-e.clientX/e.clientY鼠标位置获取<!DOCTYPEhtml><htmllang="en"><head>&l...
2020-04-30 17:28:55
171
原创 案例：鼠标拖拽
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-C...
2020-04-30 17:28:52
117
原创 event案例：留言板-事件委托
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-C...
2020-04-30 17:28:48
150
原创 案例28：无限极菜单-递归
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahtt...
2020-04-30 17:28:45
194
原创 案例27：百度音乐全选-onchange监听单选框复选框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><me...
2020-04-30 17:28:41
272
原创 2.nodejs通过stream方式加载页面 / 通过fs模块加载页面
nodejs通过stream方式加载页面（stream方式加载优化性能）小贴士：nodemon index.js 启动index.js页面转存失败重新上传取消//1.原生node如何区分路由？？（后端路由）//2.原生node如何加载页面？？(性能问题：stream)；//3.原生node如何加载第三方资源？？？//单页面应用（无刷新）spavue...
2020-04-26 23:05:03
338
原创 案例26：查找替换文字
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="./index.css"><...
2020-03-26 14:33:26
346
原创 案例25：随机打乱图片
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><linkrel="styl...
2020-03-26 14:33:22
936
原创 案例24：伪3D图片切换
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahtt...
2020-03-26 14:33:18
205
原创 案例23：文字搬运工
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>文字搬运工</title><linkrel="stylesheet"href="./index.css"></h...
2020-03-26 14:33:15
199
原创 动画帧requestAnimationFrame / 取消动画帧cancelAnimationFrame(index)
requestAnimationFrame 动画帧 性能好1.会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率2.在隐藏或不可见的元素中，将不会进行重新重绘或回流语法：requestAnimationFrame（callback）参数：callback下一次重绘之前更新动...
2020-03-26 14:32:26
4473
原创 Tween动画框架
Tween动画tcurrenttime（当前时间） bbeginningvalue（初始值）cchangeinvalue（变化量）dduration（持续时间）框架代码：varTween={linear:function(t,b,c,d){//匀速returnc*t/...
2020-03-26 14:32:22
288
原创 mTween动画框架封装-1
1.框架2.添加css方法3.多样式同时运动4.运动管理5.参数优化1.functionmTween(el,attr,target,duration,fx){ }el:需要动画的元素attr:需要动画的样式target：动画的目标值duration:动画时长（毫秒）fx...
2020-03-26 14:32:18
201
原创 mTween动画框架封装-2
6.添加回调函数7.添加动画结束之后的回调8.回调函数使用9.弹性菜单10.动画时间调整6.添加回调函数一个函数本身不执行，当参数传入另一个函数，在另一个函数中执行，叫做回调函数7.添加动画结束之后的回调8.回调函数使用9.弹性菜单10.动画时间调整li长度不同造成运动时间不同，用比例调整运动时间，视觉上比较柔和...
2020-03-26 14:32:14
97
原创 mTween动画框架封装-3
21.transform22.添加transform的处理23.特殊样式获取、批量设置21.transform22.添加transform的处理/*css函数*/vartransformAttr=["rotate","rotateX","rotateY","rotateZ","t...
2020-03-26 14:32:09
115
原创 元素抖动函数封装
1.抖动封装/*op:{el，attr,shakeLength}*/functionshake(op){varel=op.el,attr=op.attr,shakeLength=op.shakeLength||15,star...
2020-03-26 14:32:01
122
原创 异步函数promise、then、async、await
varTween={linear:function(t,b,c,d){//匀速returnc*t/d+b;},easeIn:function(t,b,c,d){//加速曲线returnc*(t/=d)*t+b;},easeOut:function...
2020-03-25 20:16:00
334
原创 VUE-7：VUEX
为什么要用vuex？首先，需要清楚为什么要用vuex，当我们的应用遇到**多个组件共享状态**时-多层级父子组件状态传递会特别繁琐-非嵌套父子组件状态传递也会特别繁琐vuexVuex是一个专为Vue.js应用程序开发的**状态管理模式**，类似redux...
2020-03-25 20:15:52
156
原创 VUE-6：路由2
路由组件传参我们通常把路由直接映射（绑定）的组件称为路由组件，也只有路由组件才能直接调用路由有关对象：`$router`、`$route`当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点案例我们对item.vue组件进行改造，当我们...
2020-03-25 20:15:46
173
原创 VUE-5：脚手架、调试、路由1
脚手架https://cli.vuejs.org/zh/vue-cli是vue提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：-根据配置选项自动构建项目，并安装所需要的依赖-启动一个本地开发服务器，通过这个服务器可以基于服务器环境访问本地项目，同时提供...
2020-03-25 20:15:41
773
原创 VUE-4：组件生命周期、动态组件、插件、动画
组件生命周期组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，`vue`会调用指定的一些组件方法基本生命周期函数有下面几个阶段：-创建阶段-挂载阶段-更新...
2020-03-25 20:15:35
966
原创 VUE-3：组件
组件的注册在`vue`中，我们可以通过`newVue`来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件Vue.component() 组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题）组件选项与`newVue`选...
2020-03-25 20:15:29
2052
原创 VUE-2：自定义指令、事件
自定义指令（directive指令）我们还可以通过`Vue`提供的方法来自定义指令注册指令`vue`提供了两种指令注册方式-全局指令-局部指令全局指令注册在外部局部指令注册在组件内部 在使用指令的时候，需要使用`v-指令名称`的...
2020-03-25 20:15:21
659
原创 React-11：React-redux库
redux强调的是，redux与react并没有直接关系，它是一个独立的JavaScript状态管理库（数据），如果我们希望中React中使用Redux，需要先安装react-redux安装 npmi-Sreduxreact-reduxProvider组件想在React中使用Redux，还需要...
2020-03-25 20:15:13
146
原创 VUE-1：基础、指令、数据
vue.js `vue.js`是一套用于构建用户界面的渐进式框架渐进式Vue核心-声明式渲染-组件引入我们还是先通过\<script\>的方式来引入<u>vue</u><scriptsrc="https://cdn.jsdelivr.n...
2020-03-25 20:14:56
228
原创 React-9：通过路由实现排序切换
queryString （查询字符串）通常我们把URL`?`后面的内容称为queryString，在React.js中，我们可以通过`this.props.location.search`来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式URLSearchParams...
2020-03-25 20:14:43
275
原创 React-10：Redux状态管理库（数据）
redux强调的是，redux与react并没有直接关系，它是一个独立的JavaScript状态管理库（数据），如果我们希望中React中使用Redux，需要先安装react-redux知识点-状态管理器-state对象-reducer纯函数- store对象...
2020-03-24 16:02:51
219
原创 React-8：路由React Router
路由当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过URL进行连接。但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个JavaScript重新执行，丢失状态。SPASinglePage...
2020-03-24 16:02:48
179
原创 React-7：组件之生命周期
生命周期所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在React.js中指的是组件从创建到销毁的过程，React.js在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的render函数其实就是组件生命周期渲染阶段执行的函数周期分类Reac...
2020-03-24 16:02:45
195
原创 React-6：组件之 children
children一个组件通过props除了能给获取自身属性上的值，还可以获取被组件包含的内容，也就是外部子组件，前面我们写的组件更多的是作为一个单标签组件，实际应用中很多组件是双标签的，也就是可以包含内容的，也可称为：容器组件，那么组件包含的内容，我们就可以通过props.children来获取dialog组件c...
2020-03-24 16:02:41
188
原创 React-5：组件之 props 验证
props验证随着应用的不断增长，也是为了使程序设计更加严谨，我们通常需要对数据的类型（值）进行一些必要的验证，React.js提供了一个验证库：prop-typesprop-typesprop-types是一个独立的库，需要安装https://www.npmjs.com/package/prop-typ...
2020-03-24 16:02:37
140
原创 React-4：组件之属性默认值
默认属性值defaultProps静态属性defaultProps可以为Class组件添加默认props。这一般用于props未赋值，但又不能为null的情况基于static的写法非受控组件默认值有的时候，我们希望给一个非受控组件一个初始值，但是又不希望它后续通过React.js来...
2020-03-24 16:02:00
455
原创 React-3：组件之表单与受控非受控组件
表单在React里，HTML表单元素的工作方式和其他的DOM元素有些不同。一般来说，表单以及表单中的控件（如：input、select……）是页面中与JavaScript打交道最多的元素了。虽然我们可以通过ref的形式去操作它们，但是这样会比较麻烦，React.js为我们提供了一个更好的方式把React.js中的数...
2020-03-24 16:01:55
169
原创 React-2：组件之状态与通信
组件 web组件就是对web中的数据、结构、方法等进行封装，复用，与JavaScript中功能函数封装类似，但更关注的是对web元素（标签）的封装与扩展（扩展：webComponent）通过回调函数的方式来修改外部数据React提供了两种组件构建方式-函数式组件-类式组件函数式组件...
2020-03-24 16:01:44
149
原创 React-1：搭建脚手架
初识React与JSX加载引入-基于浏览器\<script\>的模式-基于自动化的集成环境模式基于浏览器\<script\>的模式React.js框架本身包含两个部分-react.js：提供React.js核心功能代码，如：虚拟dom，组件...
2020-03-24 16:01:12
154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人