- 博客(58)
- 收藏
- 关注
RSS订阅原创 echarts 双y轴实现涉及问题解决
echarts 双 y 轴实现及问题解决1.刻度值不显示2.数值不对应轴3.最大值默认设置合适大小的公式4.刻度线不一致
2022-07-23 14:45:00
2790
原创 echarts 图例居右不能水平排列
在工作过程中发现正常设置图例靠右，设置水平排列就无效了解决方法相当简单：right: 'left',同理图例靠下也不能正常竖直显示，需要设置bottom: 'top',
2022-05-24 19:30:00
1279
原创 自写日历（周日历，农历节日节气）
详细的写了一个日历组件，把遇到的问题整理在这里目录antd 的日历组件显示中文antd 的日历组件显示中文import locale from 'antd/lib/calendar/locale/zh_CN.js'<Calendar fullscreen={false} onPanelChange={this.onPanelChange} locale={locale}/>...
2022-04-23 13:45:00
1531
1
原创 解决 echarts 图中 tooltip 文本内容太长导致显示不全
问题：使用 tooltip 的 extraCssText，高效方便tooltip: { show:true, trigger: "axis", confine: true, // 文本太长自动换行 extraCssText: 'white-space: normal; word-break: break-all;', // 文本太长自动换行效果：...
2022-04-19 19:45:00
2149
原创 git相关命令及重新修改无效解决办法
这里写目录标题新建代码库配置信息信息修改无效问题解决办法增加/删除文件代码提交分支标签查看信息远程同步撤销生成一个可供发布的压缩包新建代码库在当前目录新建一个Git代码库$ git init新建一个目录，将其初始化为Git代码库$ git init 你的工程名称下载一个项目和它的整个代码历史$ git clone 你的项目地址配置信息显示当前的Git配置$ git config --list编辑Git配置文件$ git config -e [--global]设置提交代码
2022-03-14 15:45:17
1276
原创 编写一个函数来查找字符串数组中的最长公共前缀
题目编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 “”。示例 1：输入：strs = ["flower","flow","flight"]输出："fl"示例 2：输入：strs = ["dog","racecar","car"]输出：""解释：输入不存在公共前缀。提示：0 <= strs.length <= 2000 <= strs[i].length <= 200strs[i] 仅由小写英文字母组成解题思
2021-05-27 20:30:39
2347
原创 this 指针及作用域 快速理解
this 指针对象方法中的 this在对象方法中， this 指向调用它所在方法的对象；// 创建一个对象var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; // John Doe }};这里，this 指向了 person 对象；因为 pers
2021-04-01 10:46:15
311
1
原创 Ant Design 表单手机号验证
rules :[ { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '请输入正确的手机号' }]或者rules :[ { pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/, message: '请输入正确的手机号' }]另附一篇我看到比较全面的校验博客：https://blog.csdn.net/itbra
2021-01-26 12:23:59
4774
原创 Redux 入门学习教程（一）-- 核心 API 以及 工作流程
看到了非常好的入门教程，对刚学习 Redux 的我帮助很大，在这和大家分享~什么是 ReduxRedux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览安装 Redux...
2020-11-27 19:46:58
157
1
原创 React 报错：Newline required at end of file but not found
代码没有问题，却在代码最后一行显示错误： http://eslint.org/docs/rules/eol-last Newline required at end of file but not found 解决：在每个 js 文件写完后 要多写一行的空白行原因：eslint rules规则限制了：eslint eol-last: ["error", "always"]eslint eol-last: ["warn", "never"]eslint eol-last:0代码关
2020-10-15 15:49:39
260
转载 react 给选中的 li 添加样式
react 给选中的 li 添加样式思路：使用事件委托，关键：获取到的index必须转为数字，因为它是字符串handleClick = (e) => { const nodeName = e.target.nodeName.toUpperCase() let tag = e.target; if (nodeName === 'LI') { let index = parseInt(tag.getAttribute('inde
2020-09-25 11:55:00
693
2
原创 父级 Flex 属性总结
主轴与侧轴在flex布局中，分别为主轴和侧轴两个方向，或行列 或X轴Y轴；默认主轴方向是X轴，水平向右；侧轴方向是Y轴，水平向下；flex-direction设置主轴的方向属性值说明row从左到右 （默认）row-reverse从右到左column从上到下column-reverse从下到上flex-wrap设置子元素是否换行；默认情况下，项目都排在一条轴线上，flex 布局中默认不换行属性值说明nowrap不换行（默
2020-09-23 14:22:23
220
原创 路由库 React-Router
基本用法通过管理 URL，实现组件的切换和状态的变化；使用时，路由器 Router 就是 React 的一个组件；Router 组件本身只是一个容器，真正的路由要通过 Route 组件定义；可以同时使用多个Route组件，也可以嵌套使用；path 属性Route组件的path属性指定路由的匹配规则：设置 path 属性：当路径匹配时，加载指定组件；省略 path 属性时：不管路径是否匹配，总是会加载指定组件；通配符规则如下：:paramName:paramName 匹配
2020-09-21 11:59:15
227
原创 React 中关于 key 的基础知识
在 React 中，当创建一个元素时，必须包括一个特殊的 key 属性，否则，运行代码时，将会看到一个警告 a key should be provided for list items为什么要用 keykey 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。在新增 key 之后使得之前的低效转换变得高效。设置 key通常，我们使用数据中的 id 来作为元素的 key：<li key={xxx.id}>当元素没有确定
2020-09-21 09:37:07
435
原创 React 之 事件处理与条件渲染
需要注意 React 和 DOM 的区别：React 事件的命名采用 小驼峰式（camelCase），而不是纯小写；使用 JSX 语法时你需要传入 一个函数 作为事件处理函数，而不像 DOM 那样，是一个字符串；不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault()；绑定 this 的方法以下回调函数名称用 handleClick 来表示方法一：bind在 constructor 中：this.handleClick = this.handle
2020-09-19 11:18:38
208
原创 React 中重要的 JSX
了解 JSXReact 使用 JSX 来替代常规的 JavaScript。JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。通俗的讲，JSX 将 < 开头的解析成 html，将 { 开头的解析成 javascriptps：由于 JSX 就是 JavaScript，一些标识符像 c
2020-09-15 18:06:55
151
原创 React 小白初入门
推荐学习：React 官方文档：https://react.docschina.org/React 菜鸟教程：https://www.runoob.com/react/react-tutorial.html关于React特点描述库React 是一个用于构建用户界面的 JavaScript 库声明式设计采用声明范式，可以轻松描述应用高效通过对 DOM 的模拟，最大限度地减少与 DOM 的交互灵活可以与已知的库或框架很好地配合JSXJSX 是
2020-09-13 14:17:00
1345
1
原创 CSS3 新增动画特性 @keyframes
定义动画用 keyframes 定义动画（类似定义类选择器）动画序列0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列；在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐变为新样式的动画效果；from 和 to 等同于 0% 和 100%；@keyframes 动画名称 { 0% { transform: translateX(0px); } 100% { transform: translateX(1000px); }}调用动画
2020-09-10 14:49:09
393
原创 响应式开发
响应式开发原理使用 媒体查询 针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备。响应式布局容器响应式需要一个父级作为布局容器（一般类名为 container），来配合子元素来实现变化效果。原理：在不同屏幕下，使用 媒体查询 来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下看到不同页面布局和样式变化的效果。设备划分设备划分尺寸区间常用的尺寸划分（设置宽度）超小屏幕（手机）< 768px100%小屏设备（平板）768px
2020-09-02 18:36:36
259
原创 ES6 新增集合 Map 和 Set
MapMap 是一组键值对的结构，具有极快的查找速度。初始化初始化Map需要一个二维数组，或者直接初始化一个空Map： var m1 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); var m11 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); var m2 = new Map();打印 m1，会返回Map {“a” => “a1”, “b” => “b2
2020-08-31 19:14:34
180
原创 Vue 实现简单记事本
用到的知识列表结构可以通过 v-for 指令结合数据生成v-on 结合事件修饰符可以指定某个键，比如 .enter通过 v-model 可以快速的设置和获取表单元素的值vue 是一种基于数据的开发方式关于 data 中使用 return 的问题因为使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件；而不使用return包裹的数据会在项目的全局可见，会造成变量污染 。实现效果代码<!DOCTYPE html><html lang="en">
2020-08-24 23:56:02
1537
1
原创 html5 css3 新增总结
html5新增的语义化标签标签名称<header>头部标签<nav>导航标签<article>内部标签<section>定义文档某个区域<aside>侧边栏标签<footer>尾部标签新增的多媒体标签新增视频标签<video src = "文件地址"></video>常见属性：属性值描述mutedmuted静
2020-08-17 12:27:03
248
原创 ES 6/7 新特性： Promise async await
题目：一秒后打印 1，隔两秒打印 2, 再隔三秒打印 3首先，用普通的 setTimeout 来完成：setTimeout(() => { console.log(1) setTimeout(() => { console.log(2) setTimeout(() => { console.log(3) }, 3000) }, 2000)}, 1000)这样的嵌套多了会像一个千层蛋糕
2020-08-16 23:01:39
343
原创 清除浮动的知识总结
为什么要清除浮动有时候为了方便，父元素不设置高度，而子盒子又是浮动的，这样如果不清除浮动，就会影响后面的布局。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。清除浮动的方法额外标签法（隔墙法）格式：选择器{clear: 属性值; }属性值描述left清除左侧浮动的影响right清楚右侧浮动的影响both同时清除左右两侧浮动的影响其中：clear: both; 较为常用。优点：通俗易懂，书写方便；缺点：添加
2020-08-13 12:01:52
188
原创 电商首页的轮播图
实现功能1、自动轮播2、鼠标划入左右按钮出现，划出消失3、左右按钮点击转换4、下方小圆点实现切换效果html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2020-08-11 22:57:20
1311
1
原创 一个简单易懂的拖拽实例
鼠标拖动方块，并限制出界：实现效果：html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link r
2020-08-07 18:38:49
304
原创 浏览器兼容设置 + 拖拽封装
浏览器兼容设置都以点击事件 onclick 为例：事件对象获取document.onclick = function(ev) { let e = ev || window.event;}获取键码let w = e.which || e.keyCode;目标对象 / 触发对象button.onclick = function() { let target = e.target || window.event.srcElement;}组止超链接默认行为的函数e 为获
2020-08-07 18:36:13
479
原创 跟随鼠标 光点 练习
是一个简单的小练习，最后实现的效果如下：就是蓝色的点，跟着鼠标走，后面的也清除。思路最后的点先移到倒数第二的位置，倒数第二移到倒数第三的位置，以此类推…最后让第一个点，到达鼠标的位置；ps: 不要想着先挪第一个再挪第二个，那你第二个很可怜，都找不到第一个之前的位置…html 文件就是简单的设置了 20 个 div 标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UT
2020-08-07 12:23:59
380
原创 ES6 新增的数组方法举例
举几个例子~~const arr = [1,2,3,4,5,99,102,-1,3,7];forEach是一种遍历方法举例：1、使数组中每一个元素乘 2arr.forEach((ele,index) => { arr[index] *= 2;})2、求和let sum = 0;arr.forEach((ele,index) => { sum += arr[index]; return sum; })console.log(sum);m
2020-08-06 12:04:07
298
原创 js, css, html 实践：跟随鼠标移动提示框
html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标移动提示框</title> <link rel="stylesheet" href=".
2020-08-05 22:30:47
1107
原创 js 笔记_10 事件相关知识总结
格式：元素节点.on + 事件例如点击事件：button.onclick = 匿名函数;事件类型事件类型包括：鼠标事件、键盘事件、HTML 事件鼠标事件事件何时触发click单击dbclick双击mouseover鼠标移入mouseout鼠标移出mousemove鼠标移动（会不停出发）mousedown鼠标按下mouseup鼠标抬起mouseenter鼠标移入mouseleave鼠标移出键盘事件事
2020-08-05 19:15:54
252
原创 用html, css, js 实现简单选项卡制作
实现功能通过点击按钮查看相应的介绍；按钮相应的变色；内容相应的切换；html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title>
2020-08-03 17:39:30
849
2
原创 备忘录进阶版： html, css, js
利用 jQuery 做一个备忘录，有记录，选中删除，选中拷贝等功能：html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点操作练习</title>
2020-08-01 21:14:23
741
原创 js 笔记_09 节点操作知识 及 备忘录实战
获取子节点childNodes：访问当前节点下所有的子节点；firstChild：访问子节点中的首位；lastChild：访问子节点中的最后一位；nextSibling：访问当前节点的下一个兄弟节点；previousSibling：访问当前节点的上一个兄弟节点；但是上述的方法会将空格，回车等作为文本节点记入。（虽然空格回车等确实就是字符，但我们获取的时候并不想带它们，所以需要一个将纯空白的文本节点剔除的方法）下面的方法只获取子节点中的元素节点。[ IE8 以下不兼容 ]和前面的功能对应：
2020-08-01 00:11:40
166
原创 js 笔记_08 BOM 及 DOM 相关
BOM系统对话框alert()：弹出对话框；confirm()：弹出一个带确定和取消的提示框；返回值：如果点击确定，返回 true；如果点击取消，返回 false；prompt()：弹出一个带输入框的提示框；第一个参数：面板上显示的内容；第二个参数：输入框里面的默认内容；（可以不写）返回值：如果点击确定，返回输入框中的内容；如果点击取消，返回 null；history 对象作用：当前窗口历史记录，只要加载的 url 不一样就会产生历史记录；注意不是浏览器的，而是当前窗口的历史记
2020-07-31 15:19:54
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人