Sakura Teoh-CSDN博客

原创代码随想录算法训练营第一天：二分查找、移除元素

当 nums[mid] > target，此时需要移动 right 指针，重置右边界，因为循环条件判断的是

2024-05-22 22:22:40 361 1

原创页面即时聊天客服功能

项目最近需要增加一个在线客服的功能，需要快速上线，只有几天时间，找了找网上的api，有个比较不错的https://crisp.chat/en/后台服务长这样使用非常简单，在仪表台页面找到网站管理，里面有需要插入页面你的api把代码插入到项目的html中的head标签内就可以使用了页面显示的样式也是在网站设置中进行设置在页面中显示如下...

2021-06-23 11:22:16 853

原创 webpack Cannot find module ‘webpack-cli/bin/config-yargs‘-

在使用 webpack-dev-server 时，打包会出现这个错误，主要是由于webpack-cli和webpack-dev-server的版本不一致导致的，将两者版本统一就可以了比如webpack4使用的是webpack-cli4，但是现在只有webpack-dev-server3，就降低webpack-cli版本即可。使用npm view webpack-cli versions查看当前版本，选择3版本最新的包安装2020.12月最新的能适配的版本如下...

2020-12-03 15:01:23 242 1

原创 React 性能优化

给列表中添加key在列表中，比较两个列表相不相同会从头开始一个一个对比，只在列表结尾添加数据，加不加key意义不大，如果在列表开头添加数据，对比到第一个节点不一样就会修改列表，最后会将整个列表都重新修改如果给列表中的每一项都添加key，那么React会使用key来对比两个树结构上的子元素差异，不会对整个列表修改，只会插入一个元素!注意： key是唯一的 key不要使用随机数，两棵树的key值还是不一样使用index作为key对性能优化没有帮助调用render()函数shouldCom

2020-11-10 09:22:37 262

原创 Custom elements in iteration require ‘v-bind:key‘ directives.eslint-plugin

在使用v-for的时候，每一个相同的标签都需要添加一个key，在获取后端接口的时候里面一般都带有了一个id，可将将之与key绑定，比如： :key=“item.id”，添加唯一标识符就可以了。

2020-10-26 16:08:56 480

原创 To install them, you can run: npm install --save core-js/modules/es.array.index-of core-js/modules/e

To install them, you can run: npm install --save core-js/modules/es.array.index-of core-js/modules/es.object.to-stringcore-js/modules/es.regexp.exec core-js/modules/es.string.replaceyarn serve之后显示有别的包没有安装先ctrl+c退出使用npm i core-js@3.6.4然后在yarn serve就

2020-10-23 20:21:10 10969

原创 webpack 本体和cli分离自行安装webpack-cli We will use “yarn“ to install the CLI via “yarn add -D“. Do you wan

使用npm i webpack -g 安装webpack之后，输入webpack -v 会提示安装webpack-cli，如果没有安装yarn的话，我们可以先选择no然后在手动安装webpack-cli使用npm i webpack-cli -g安装完成之后就可以正常使用webpack了再查看webpack版本 webpack -v就可以看到当前的webpack版本了...

2020-10-20 20:24:54 4039 3

原创 webpack Module not found: Error: Can‘t resolve 使用新命令

使用命令webpack ./xxx/xx.js ./yyy/yy.js打包项目的时候提示无法处理这个命令，原来是webpack的在4.0之前是使用上面的命令，我现在使用的是webpack5.1.3，要使用新的命令webpack ./xxx/xx.js -o ./yyy/yy.js在中间加一个-o就可以了我打包出来js文件是放在yyy文件夹下的yy.js文件中，默认生成了一个main.js文件，所以应该是正常的。1–编译结束2–最终打包的文件有283字节3/4–需要打包的文件和依赖文件的大小.

2020-10-20 20:19:29 1962

原创 Node.js nvm的安装和 nvm转换镜像地址

1、安装nvm选择安装nvm的地址选择使用nvm安装Node.js的地址2、在cmd中验证安装是否成功输入nvm version3、常用命令nvm list available ----当前可下载的所有Node.js版本nvm list ----当前Node.js安装地址中的Node版本有哪些nvm install xx.xx.x ----安装某一版本Node.jsnvm use xx.xx.x

2020-09-28 21:53:11 1769

原创 VSCode 将光标移到行尾

文件 -> 首选项 -> 键盘快捷方式搜索 cursorLineEnd (直接复制)然后修改绑定键位就行了看了知乎大佬-沉冰浮水的教学贴上原贴https://www.zhihu.com/question/24418737

2020-08-24 23:46:15 5894 1

原创 JavaScript 求范围内的随机数

求范围内的随机数function rangeRandom(a, b) { var max = Math.max(a, b) var min = Math.min(a, b) var res = Math.floor(Math.random() * (max - min + 1) + min) return res}var n = 30var m = 50var obj = {}for (var i = 0; i < 100000; i++) {

2020-08-19 22:50:07 148

原创 JavaScript 获取时间差

获取时间差获取两个时间节点之间相差的天小时分钟秒思路：准备两个时间对象两个时间对象相减为了兼容低版本浏览器应使用两个时间节点的时间戳进行相减，相减之后获取绝对值，就不需要考虑两个时间节点的大小，相减之后的结果是ms，先换算成s再计算换算天：diffTime / 一天的秒数，取整换算小时：diffTime % 一天的秒数 / 一小时的秒数，取整换算分钟：diffTime % 一小时的秒数 / 一分钟的秒数，取整换算秒钟：diffTime % 一分钟的秒数，取整

2020-08-19 22:34:55 782

原创 JavaScript 浮点数丢失精度的问题

对浮点数进行计算后并输出，会导致精度丢失的问题如：console.log(1 - 0.7); //0.30000000000000004console.log(6 * 0.7); //4.199999999999999console.log(1.2 / 0.2); //5.999999999999999console.log(0.1 + 0.2); //0.30000000000000004我们可以将浮点数扩大一定倍数，然后把浮点数变成近似的整数进行计算，最后再缩小相同倍数就可以了c

2020-08-19 21:24:51 237

原创 JavaScript toFixed()四舍五入问题

文章目录保留小数银行家舍入法使用Math.round()进行取舍保留小数toFixed() 语法：数字.toFixed(要保留几位小数) 返回值：以**字符串**的形式返回结果，如果不够指定的位数会使用0补齐。注意：toFixed不是以四舍五入的形式进行取舍的，而是使用银行家舍入法进行取舍的银行家舍入法其实质是一种【四舍六入五取偶】的方法。规则是：当舍去位的数值 < 5时，直接舍去当舍去位的数值 >= 6时，在舍去的同时向前进一位当舍去位的数值 = 5时：

2020-08-19 21:23:35 7409 2

原创 JavaScript client、offset、scroll的 width与height 和 left与top，以及浏览器窗口尺寸的获取

文章目录长度和尺寸clientclientWidth和clientHeightclientLeft和clientTopoffsetoffsetParentoffsetWidth和offsetHeightoffsetLeft和offsetTopscrollscrollWidth和scrollTopscrollLeft和scrollTop浏览器窗口尺寸BOM级别获取DOM级别的获取长度和尺寸clientclientWidth和clientHeight元素的内容 + 左右padding 区域的尺寸di

2020-08-17 20:36:32 228

原创 JavaScript onscroll和scrollTop

onscroll是浏览器的滑动监听事件，当滑动鼠标或者拖动滚动条的时候，就会触发onscroll事件。scrollTop指的是浏览器页面卷起的高度。对于scrollTop来说，有两种获取方法使用document.documentElement.scrollTop获取使用document.body.scrollTop获取使用这两种方法都可以获取到浏览器卷起的高度，区别是：方法1必须在页面写有DOCTYPE标签时才能获取到，而方法2必须在页面没有DOCTYPE的情况下才可以生效。对于这两个方法

2020-08-16 17:22:25 731

原创 JavaScript全选框

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../reset.css"> <title>Document&l

2020-08-16 14:33:23 313 1

原创 JavaScript排序算法（冒泡、选择、计数、插入）

文章目录冒泡排序选择排序计数排序插入排序冒泡排序 var a = [9, 8, 7, 6, 5, 4, 3, 2, 1 ] for ( var i = 1; i < a.length; i++ ) { for ( var j = 0; j < a.length - i; j++ ){ if (a[j] > a[j+1]){ var t = a[j];

2020-08-07 11:49:49 192

原创 JavaScript快速排序（递归二分排序）（分治算法）

function quickSort(arr){ //找到最后一层的返回条件 if(arr.length <= 1){ return arr; } //截取数组中间位置的值 var center = arr.splice( parseInt(arr.length / 2), 1)[0]; //定义小于和大于中间位置值的数组 var left = [], right = []; //遍历截取后的数组并将小于和大于

2020-08-06 22:59:49 371

原创（四）元素类型基础知识+案例应用

文章目录元素类型元素类型分类常见的元素类型 ★★★★★块元素内联元素行内块元素元素类型的转换元素嵌套规则添加display:none声明的元素，在dom树和渲染树中的区别元素类型的应用导航体验优化上下对齐导航栏文字翻译元素类型1、从CSS的显示为出发点，把所有的html标签分为：块状元素 block 内联元素 inline 内联块元素 inline-block 不显示 none 2、block特点： (1)在页面中以矩形区域显示 (2)能直接设置宽度和高度 (

2020-08-01 12:25:48 459

原创新闻列表编写流程+单行文本溢出处理添加省略号

新闻列表编写流程如果新闻列表后面有时间 <li> <a href=""></a> <span></span> </li> (1)给li添加宽高，高为行高(2)如果有时间，需要给a和span添加左右浮动(3)给a和span添加文本样式（大小、颜色），并让文本上下居中(给li设置line-height，或者给a设置display:inline-block)(4)以背景图的形式给li添加列表符号，

2020-08-01 12:21:59 285

原创（三）盒子模型+问题处理

盒子模型从里到外：内容区、内填充、边框、外边距padding1、padding设置在内容和父元素之间，在父元素内部2、padding的作用：控制子元素在父元素里面的位置关系3、padding会把盒子撑大4、添加padding之后想让盒子保持原来的大小，需要在宽高的基础上减掉padding的值5、给单一方向设置padding的值:padding-top/right/bottom/left6、padding值的设置一个值：四周两个值：上下、左右三个值：上、

2020-08-01 12:18:10 432

原创（二）CSS基础+要点

CSS层叠样式表，用来给网页做样式渲染。css语法语法构成：选择符{属性 : 属性值; }1、声明必须放在大括号里面2、属性和属性值用冒号连接3、每一条声明结束用分号结尾4、如果一个属性有多个属性值的时候，属性值之间用空格隔开5、所有的css代码都需要放在css样式表中6、使用/* */来注释css样式表内部样式表创建方法：<style></style>放置的位置：尽量放在head标签中，一般放在title标签的下面外部样式表创建方法：创建

2020-08-01 11:44:02 257

原创单排/多排图片横排效果margin处理

在网页中，有时需要编写多行带图片带文字带间距模块，就像下面这样：这是一个使用dl dt dd编写的，而dl之间的间距我们通常是先使用float浮动，然后再用margin-left或者margin-right来进行处理，最后再对头或者尾淡出处理，这样会比较麻烦，如果我们使用margin-right进行处理，再对每一行右侧超出的部分进行隐藏就可以了。1、将需要进行超出的margin部分进行隐藏的一整段代码使用div0包裹住2、对div0设置宽高，这里的宽高是包括超出的margin部分，这时候显示出来的依

2020-07-26 10:09:11 415

空空如也

空空如也