- 博客(25)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 25.react-redux的使用
目录 作用 安装react-redux插件 1.Provider 容器组件 2.connect高阶组件 3.bindActionCreators包装 4.selector 根据状态,计算额外数据 5.reselect 减少重复代码书写 提高性能 6.redux 调试工具 7.redux-thunk 异步中间件 作用 为了更方便的使用Redux，简化了redux的操作，使用起来更简单 安装react-redux插件 npm i react-redux yarn ...
2021-12-02 16:51:40
233
原创 24.redux工作原理以及数据流向
介绍 redux是一个状态管理工具 redux不仅可以和react框架结合起来使用, 也可以和其他的主流框架结合使用 下载使用npm i redux 核心原理 store 数据存储对象 getState() 作用: 获取数据存储对象的数据 dispatch() 作用: 可以发送一个数据操作对象action给reducer函数,会重新执行一次根据action.type执行对应的case分支 subs...
2021-12-02 16:35:52
1131
原创 17.webpack的基本使用以及配置
webpack中文官方网站：https://www.webpackjs.com/ 一、webpack发展由来 前面介绍的几种模块化方案中，所有的模块都需要从服务器端传输到浏览器，那么这个过程有两种情况： 1、一个请求得到一个模块 优点：只有需要的模块被传输。缺点：多个请求意味着占用更多带宽，请求延迟导致应用启动很慢。 2、一个请求得到所有模块 优点：更少的请求，更少延迟。缺点：不需要的模块也被下载。 webpack的出现是为了解决以上模块化的一些缺陷，主要是三个方面： 1、公共的模块（能够复
2021-07-29 14:53:56
251
原创 16.js动画函数封装 3种 接轮播图的animate.js
//任意方向的运动函数 function yundong (ele,sty,end){ var start=parseInt(getStyle(ele,sty)); timer=setInterval(function(){ var step=(end-start)/10; step>0? step= Math.ceil(step): step= Math.floor(step); start+=step; if(.
2021-07-04 12:20:42
96
原创 15.js原生轮播图 6个功能
轮播图 <style> * { /* 清除所有元素自带内外边距 */ padding: 0; margin: 0; /* 去掉下划线 */ text-decoration: none; /* 去掉列表符 */ list-style: none; } /* 最外层div .
2021-07-04 12:12:10
146
1
原创 14.JavaScript快速选择排序与sort排序超简单
快速选择排序 <script> function quitely(arr) { // 终止条件 如果数组长度小于等于1就不用排序 if (arr.length <= 1) { return arr; } // var num = Math.floor(arr.length / 2); //1,中间的下标
2021-07-02 21:02:16
206
2
原创 13.JavaScript选择排序以及函数封装
未封装 <script> var arr = [23, 1, 42, 5, 77, 8, 432, 46, 5476, 63, 327, 76, 5, 2, 12,]; //先循环所有数组项 for (var i = 0; i < arr.length; i++) { //拿当前项和后边项进行比较 j+1 for (var j = i + 1; j < arr.length; j++
2021-07-02 20:58:15
236
原创 12.JavaScript冒泡排序 以及 函数封装
未封装 <script> var arr = [213, 2, 132, 4, 34, 32, 534, 653, 6, 47, 45, 7, 57, 457, 457, 1, 1, 25, 45, 4, 6]; for (var i = 0; i < arr.length - 1; i++) { //控制的轮数 轮数等于数组长度减一 for (var j = 0; j < arr.length - i - 1; j.
2021-07-02 20:55:04
336
原创 11.JavaScript中去重的俩种方法
<script> // 方案一 var arr = [3, 24, 4, 5, 33, 3, 3, 22, 2, 34, 24, 23, 25, 24, 23, 42, 35]; //先声明一个空的数组 var arr1 = []; //先循环数组 for (var i = 0; i < arr.length; i++) { if (arr1.indexOf(arr[i.
2021-07-02 20:51:09
98
原创 10.js文字滚动 效果
CSS样式 <style> span:nth-child(1) { background-color: pink; } span { display: block; } span:nth-child(3) { background-color: yellow; } </style> HTML结构...
2021-07-02 20:48:18
181
原创 9,JS距离双11的倒计时
CSS样式 <style> #box { width: 500px; height: 500px; background: #eee; margin: 20px auto; text-align: center; } #box h3 { font-size: 32px; p..
2021-07-02 20:43:28
1241
原创 8,js事件委托 10000个li添加事件控制台输出张三
HTML结构 <ul> <li>喜欢你第n天</li> <li>喜欢你第n天</li> <li>喜欢你第n天</li> <li>喜欢你第n天</li> <li>喜欢你第n天</li> <li>喜欢你第n天</li> <li>..
2021-07-02 20:30:00
389
原创 7,jQuery动画轮播图
/*CSS 样式*/ <style> * { padding: 0; margin: 0; list-style: none; } img { width: 808px; height: 508px; } .a { width: 812px; ...
2021-06-27 23:05:57
266
2
原创 6,jQuery 简易购物车
<!--HTML结构--> <button id="chkAll">全选</button> <button id="fx">反选</button> <!-- 1, --> <li class="li"> <input type="checkbox"> 商品1 单价:<span class="jg">19.9...
2021-06-24 23:06:01
181
2
原创 5,当鼠标移到div时颜色逐渐变透明js
<style> div { width: 500px; height: 500px; background-color: rgb(255, 0, 0); } </style>
2021-06-12 21:10:58
469
原创 4,js 简易购物车效果
<!--页面结构代码块--> <p> 商品名:惠普光影精灵9代<br> 价格: <span>6299.00</span><br> 数量: <input type="number" value="0" style="width: 50px;"> <br> 小计: <span>0元</span> </p> .
2021-06-12 02:10:00
117
原创 3,js网站换肤 点击按钮 背景跟随变换
<style> /*初始背景色为灰色*/ body { background-color: #CCC; } </style> <!--页面结构--> <button>粉色</button> <button>青色</button> <button>蓝色</button> <button>黄色</button>...
2021-06-12 02:00:56
358
原创 2,js模拟聊天
<style> .box { width: 200px; height: 200px; border: 1px solid black; background-color: aqua; } </style>
2021-06-12 01:45:04
187
原创 1,js文本框密码的显示与隐藏
<div class="box"> <label for=""> <img src="./images/close.png" alt=""> </label> <input type="password"> </div>
2021-06-12 01:28:35
538
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人