- 博客(43)
- 收藏
- 关注
RSS订阅原创 使用IntersectionObserver替代判断是否在可视区域
在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。el . offsetTop - document . documentElement . scrollTop
2022-10-10 11:46:06
907
原创 node文件夹操作
文件夹操作// 写文件const fs = require('fs');function mkdir(pathStr, cb) { let pathList = pathStr.split('/'); let index = 1; function make(err) { let currentPath = pathList.slice(0, index++).join('/'); if (index === pathList.length + 1) return cb(
2021-04-16 16:34:44
237
原创 二叉树
树搜索二叉树class Node { constructor(element, parent) { this.element = element; this.parent = parent; this.left = null; this.right = null; }}class Tree { constructor() { this.root = null; } add(element) { if (this.root ==
2021-04-16 11:07:44
97
原创 柯理化函数
add(1)(2)(3) // 自己写的let add = function () { let times = 0; let num = 0; return function a(item) { num += item; times++; return times < 3 ? a : num; }}()console.log(add(1)(2)(3))// 改进后可以满足的传法add(1,2)(3) add(1)(2,3) add(1,2,..
2021-04-14 19:33:46
94
原创 从0到1实现一个满足Promises/A+规范的Promise
从0到1实现一个满足Promises/A+规范的Promise文章目录从0到1实现一个满足Promises/A+规范的Promise前言编写前需要点亮的一些知识点高阶函数发布订阅实现一个简易的PromisePromise异步问题灵魂then的链式调用其他方法应用前言Promise是每个前端必备的知识储备，Promise可以解决开发中常遇见的**嵌套回调 **，同步并发，以及多个异步处理错误的问题。我们可以用Promise包裹异步方法使它更加优雅，同时让异步实现同步执行的async-await也是基于P
2021-04-13 17:10:19
92
原创 javascript 实现链表
class Node { constructor(element, next) { this.element = element; this.next = next; }}class LinkedLit { constructor() { this.head = null; this.size = 0; } _node(index) { let current = this.head; for (let i = 0; i < i.
2021-04-12 15:57:41
61
原创 键盘挡住微信小程序授权键并不完美解决办法
当用户快速点击输入框，再点击登录弹出授权弹框，由于操作太快导致授权框弹出后，输入框仍然聚焦，点击屏幕任何地方都无法使输入框失去焦点，导致键盘无法关闭，用户无法对其进行授权进行下一步操作。现阶段的解决方法是将每个输入框都绑定focus，将focus全部设置成...
2020-11-26 18:05:48
441
原创 微信小程序中自定义密码框中关于聚焦键盘吊起的问题
最近需要自己做一个验证密码的密码框，实现效果如下图所示该密码框实现的基本思路就是将Input隐藏起来，然后根据Input输入中value的长度，展示出相应数量的*。（这里提供简易的Taro，React的代码）const PasswordCom = () => { const [pwd, setPwd] = useState('') const len = pwd.length const arr = [0,1,2,3,4,5] return ( <View&
2020-11-26 15:25:57
537
原创 React hooks中节流的处理
背景：采用React hooks来进行开发，确认自己写的节流函数没有问题后，在获取取手机验证码的操作中，快速多次点击按钮“获取手机验证码”，仍然造成多次发送请求。如图，快速连续点击获取验证码按钮，发送了三个getcode的请求解决此问题一般采用节流解决节流节流：在规定时间内，函数只执行一次。例如，2秒内点击同一按钮多次，但按钮所绑定的事件只执行一次。2秒后，按钮又被点击的话，函数在点击后的2秒内又只执行一次，不点击就不执行。原理：闭包。节流一般有两种实现方式，时间戳和定时器。用时
2020-11-17 15:36:11
3482
2
原创 解决OPPO手机安卓5.1版本flex布局横向滚动条失效
解决OPPO手机安卓5.1版本flex布局横向滚动条失效解决OPPO手机安卓5.1版本flex布局横向滚动条失效，首先尝试flex新旧兼容写法无果后。观察到项目中宽度全部失效，累计宽度最大为容器的宽度，考虑是否是由于容器空间不足，所有项目被迫缩小。将容器中所有项目的flex-shrink属性设置为0后，问题解决。正常效果bug效果有关flex-shrink属性的基本用法flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。计算方法：当..
2020-11-13 14:25:39
810
2
原创 关于小程序Input的高度问题
背景：采用taro开发小程序中，需要开发一个可以➕，➖，也可手动输入的计数器，如图所示 问题：Image和Input所给的height和border都是40px、1px，但在各个机型下Input都比Image的高度高一点，如图所示解决过程：刚开始猜想是否是小程序中图片比实际像素小了2px，将图片高度增大，肉眼看起来在一下屏幕较大的手机上确实变得对齐了，但是在屏幕较小的手机上又回到了之前的样子，此时将Input的高度增加发现是能增加的，高度减小确不能实现，此时猜想Input组件是否有...
2020-11-12 14:16:58
1832
1
原创 create-react-app css模块化 以及 sass的模块化
一、css模块化1、暴露webpack npm run eject2、找到webpack.config.dev.js3、找到loaders中的loader: 'style!css?importLoaders=1!postcss'改为loader:'style-loader!css-loader?modules&importLoaders=1&localIde...
2019-12-24 19:55:38
615
原创 旋转抽奖
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
2019-10-27 14:05:10
313
原创 js贪吃蛇小游戏
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
2019-10-26 16:29:45
523
1
原创 手写一个简单的vue实现双向数据绑定
手写一个简单的vue实现mvvm1. 准备两个文件index.html和mvvm.jsindex.html内容如下：<body> <div id="app"> <input type="text" v-model="person.name"> {{person.name}} <div> ...
2019-10-02 15:53:46
1254
原创 BFC总结
1、为什么会有BFC从理论上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素。但是事实却不是这样，在开发中我们总是遇见各种烦人的问题，比如外边距塌陷、浮动的问题、图片间隙问题等，而bfc就是让里面的元素和外部真正的隔离开来。2、BFC是什么BFC 是block formating context(块级格式化上下文)的缩写，在W3C中大概是这样的定义的,bfc决定了元素如何对其内容进行...
2019-09-21 01:18:02
132
原创 react实现todolist
使用React做一个简单的todolist小demo新建一个react项目 todolist写出todolist的基本结构用数组把数据存储起来监听输入框里面的内容,与state 里的inputValue绑定起来实现增加功能实现删除功能将li提取出来用单独作为一个组件，利用props传值修改删除功能，实现子组件通过父组件传过来的方法对父组件通信新建一个react项目 todolist// 创建r...
2019-07-22 18:22:29
976
原创 React Devtools安装教程
1、打开网址：https://github.com/facebook/react-devtools/releases2、将下载下来的文件解压到英文的目录下面，不要带中文，例如：F:\react-devtools-3.4.23、执行命令：npm install安装过程中我遇到gyp ERR! configure error报错执行命令：npm i --unsafe-perm...
2019-07-14 22:34:44
193
转载 H5音频不能自动播放,Uncaught (in promise) DOMException
在chrome浏览器中输入：chrome://flags/#autoplay-policy在Autoplay policy中将Default改为No user gesture is required
2019-05-03 03:39:23
1989
原创 原生JS响应式音乐简单播放器
原生JS响应式音乐简单播放器项目目录结构项目目录结构主页面的设计要点设计图如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入项目目录结构你好！ 这是你第一次使用...
2019-05-02 17:01:52
415
原创 VScode js注释快捷方式
1、单行注释添加单行注释：Ctrl + / 或 先按CTRL+K，再按CTRL+U 取消单行注释：Ctrl + / 或 先按CTRL+U，再按CTRL+K// dome();2、多行注释1、 Alt + Shift + A/* function dome(){ console.log("你好");} */2、 /**/** * 这是一个注释...
2019-05-01 10:45:14
4526
原创 js 总结ES6中Class以及继承
一、Class1、ES6中的class可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰，更加面向对象编程的语法而已。class Point { // 定义一个Point类 constructor(x,y){ // 构造方法 this.x=x; this.y=y; } // =...
2019-05-01 01:00:16
11283
原创 JS Function类型总结以及ES6中函数的扩展
一、Function类型总结1、函数实际上是对象。 每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。函数是一个指向函数对象的指针。2、函数没有重载。3、使用 函数声明语法 定义，可以在代码开始前执行。使用 函数表达式 必须等到解释器执行到它所在的代码行，才会真正被解释执行。4、函数名本身就是变量，所以函数可以作为值来使用。5、在...
2019-04-27 21:42:37
1016
原创 JS中的 逻辑或（||） 和 逻辑与（&&）
JS中的 逻辑或（||） 和 逻辑与（&&）一般有以下两种情况：1、在条件判断中 &&：所有条件为真的时候，整体才为真的 ||：只要有条件为真的时候，整体就为真2、在赋值操作中 ||：C=A||B 首先看A的真假，A为真返回的结果是A，A为假返回的结果是B（不管B是啥）。console.log(1|...
2019-04-27 09:50:32
495
原创 mysql sql 查找每个新闻下的直接评论数量 并按照数量降序排序
select news_id,count(*)from `comment`group by news_idORDER BY 2 DESC
2018-11-21 17:07:10
2092
原创 centos7 无法启动网络(service network restart)错误解决办法
# service network restart错误信息Restarting network (via systemctl): Job for network.service failed because the control process exited with error code. See "systemctl status network.service" and "jour...
2018-10-25 09:28:05
579
原创 鼠标滑过图片图片放大
<!doctype html><html><head><style> img { display:block; } .imgbox { width:160px; border:solid 2px gray; height:120px; overflow:hidden;...
2018-10-23 22:57:23
1259
原创 我可能需要用到的资源
一、particles超炫酷的粒子背景特效https://github.com/VincentGarreau/particles.js二、WebApp开发之--"rem"单位https://www.duanliang920.com/learn/web/html5/316.html三、DOMContentLoaded与load的区别http://www.cnblogs.com/cai...
2018-10-21 23:14:13
116
原创 element-ui+vue2.0 实现登录并实现一周內记住密码
1.文件目录2.主页index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&
2018-10-19 09:54:50
7900
6
原创 清除浮动
使用伪元素来清除浮动.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }
2018-10-18 23:27:07
72
原创 安装oracle 12c时忘记装示例人力资源HR
1.创建C##HR用户create user C##HR identified by 123;2.文件名还有文件里面的hr全部替换成C##hr文件中的__SUB__CWD__/替换成脚本的绝对路径即可。3.在sys或system下...
2018-10-16 20:34:19
1012
原创 centos7安装telnet服务
1、查看是否安装了相关软件：rpm -qa|grep -E "telnet|xinetd"如果出现这三个 表示已经安装成功，不需要进行第2步。 2、安装缺失的软件：sudo yum install telnet telnet-server xinetd3、注册使用服务：（telnet服务依赖xinetd守护，安装telnet-server后启动时需要重启xinetd...
2018-09-30 15:33:42
236
原创 Centos7静态IP设置
1、ip addr 记住红色的那两个，每个人的都可能不一样。2、进入network-scripts目录并且查看该目录下存在的ifcfg-xx文件（xx我的这里是ens33）vim /etc/sysconfig/network-scripts/ifcfg-ens33修改如下配置内容关于vim 先按Esc再按i可以对其进行编辑，编辑结束后按Esc再按:wq!保存并...
2018-09-28 11:46:04
139
原创 Vue2.0搭建脚手架
使用软件Visual Studio Code1.安装node.js傻瓜式安装，直接下一步下一步。安装完成后，打开命令行工具。输入命令node -v出现对应版本号说明安装成功了。输入npm -v显示出npm的版本信息。下载地址https://nodejs.org/en/2.Vue安装 npm install vue 3.安装vue...
2018-09-18 12:47:36
168
原创 js的map方法
map()方法返回一个由原数组中每个元素调用的一个指定方法后返回的值组成的一个新数组。基本用法与forEach方法类似。注意： map() 不会对空数组进行检测。map() 不会改变原始数组。语法：array.map(function(currentValue,index,arr), thisValue)参数 描述 function(currentValue, index,a...
2018-09-11 18:22:06
2447
原创 《Vue.js实战》 标签页组件
1.所需要的文件及结构2.标签页组件的核心代码分解 先初始化各个文件●index.html●tabs.js●pane.js pane需要控制标签页内容的显示与隐藏，设置一个data：show,并且用v-show指令来控制元素； 当点击到这个pane对应的标签页标题按钮时，此pane的show值设置为true，否则应...
2018-09-02 23:42:26
1806
1
原创 Vue2.0实例双向数据绑定
结果展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-15 20:07:54
219
原创 CSS基础缺陷记录
①CSS :after 伪元素。:after 伪元素在元素之后添加内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。②关于与居中问题可以在合适的情况下考虑相对定位+绝对定位+百分比+margin（padding）值为负来解决。eg：盒子总长：300px；left：50%；margin-left：-150px；...
2018-05-15 18:53:30
138
原创 Vue2.0实例选项卡制作
结果展示：做选项卡的时候首先需要搞明白@click,:class ,v-show这三个vue常用的指令,添加事件的方式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&a
2018-04-28 15:00:05
969
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人