![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
前端学习问题集锦
Sakura Teoh
我很懒,没有简介
展开
-
页面即时聊天客服功能
项目最近需要增加一个在线客服的功能,需要快速上线,只有几天时间,找了找网上的api,有个比较不错的https://crisp.chat/en/后台服务长这样使用非常简单,在仪表台页面找到网站管理,里面有需要插入页面你的api把代码插入到项目的html中的head标签内就可以使用了页面显示的样式也是在网站设置中进行设置在页面中显示如下...原创 2021-06-23 11:22:16 · 647 阅读 · 0 评论 -
React 性能优化
给列表中添加key在列表中,比较两个列表相不相同会从头开始一个一个对比,只在列表结尾添加数据,加不加key意义不大,如果在列表开头添加数据,对比到第一个节点不一样就会修改列表,最后会将整个列表都重新修改如果给列表中的每一项都添加key,那么React会使用key来对比两个树结构上的子元素差异,不会对整个列表修改,只会插入一个元素!注意: key是唯一的 key不要使用随机数,两棵树的key值还是不一样 使用index作为key对性能优化没有帮助调用render()函数shouldCom原创 2020-11-10 09:22:37 · 209 阅读 · 0 评论 -
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 · 3967 阅读 · 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 · 1883 阅读 · 0 评论 -
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 · 1586 阅读 · 0 评论 -
VSCode 将光标移到行尾
文件 -> 首选项 -> 键盘快捷方式搜索 cursorLineEnd (直接复制)然后修改绑定键位就行了看了知乎大佬-沉冰浮水 的教学贴上原贴https://www.zhihu.com/question/24418737原创 2020-08-24 23:46:15 · 5799 阅读 · 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 · 118 阅读 · 0 评论 -
JavaScript 获取时间差
获取时间差获取两个时间节点之间相差的 天 小时 分钟 秒思路:准备两个时间对象两个时间对象相减为了兼容低版本浏览器应使用两个时间节点的时间戳进行相减,相减之后获取绝对值,就不需要考虑两个时间节点的大小,相减之后的结果是ms,先换算成s再计算换算天:diffTime / 一天的秒数,取整换算小时:diffTime % 一天的秒数 / 一小时的秒数,取整换算分钟:diffTime % 一小时的秒数 / 一分钟的秒数,取整换算秒钟:diffTime % 一分钟的秒数,取整原创 2020-08-19 22:34:55 · 727 阅读 · 0 评论 -
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 · 206 阅读 · 0 评论 -
JavaScript toFixed()四舍五入问题
文章目录保留小数银行家舍入法使用Math.round()进行取舍保留小数toFixed() 语法:数字.toFixed(要保留几位小数) 返回值:以**字符串**的形式返回结果,如果不够指定的位数会使用0补齐。 注意:toFixed不是以四舍五入的形式进行取舍的,而是使用银行家舍入法进行取舍的银行家舍入法其实质是一种【四舍六入五取偶】的方法。规则是: 当舍去位的数值 < 5时,直接舍去 当舍去位的数值 >= 6时,在舍去的同时向前进一位 当舍去位的数值 = 5时:原创 2020-08-19 21:23:35 · 7145 阅读 · 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 · 200 阅读 · 0 评论 -
JavaScript onscroll和scrollTop
onscroll是浏览器的滑动监听事件,当滑动鼠标或者拖动滚动条的时候,就会触发onscroll事件。scrollTop指的是浏览器页面卷起的高度。对于scrollTop来说,有两种获取方法使用document.documentElement.scrollTop获取使用document.body.scrollTop获取使用这两种方法都可以获取到浏览器卷起的高度,区别是:方法1必须在页面写有DOCTYPE标签时才能获取到,而方法2必须在页面没有DOCTYPE的情况下才可以生效。对于这两个方法原创 2020-08-16 17:22:25 · 666 阅读 · 0 评论 -
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 · 258 阅读 · 1 评论 -
(四)元素类型基础知识+案例应用
文章目录元素类型元素类型分类常见的元素类型 ★★★★★块元素内联元素行内块元素元素类型的转换元素嵌套规则添加display:none声明的元素,在dom树和渲染树中的区别元素类型的应用导航体验优化上下对齐导航栏文字翻译元素类型1、从CSS的显示为出发点,把所有的html标签分为: 块状元素 block 内联元素 inline 内联块元素 inline-block 不显示 none 2、block特点: (1)在页面中以矩形区域显示 (2)能直接设置宽度和高度 (原创 2020-08-01 12:25:48 · 285 阅读 · 0 评论 -
新闻列表编写流程+单行文本溢出处理添加省略号
新闻列表编写流程如果新闻列表后面有时间 <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 · 234 阅读 · 0 评论 -
(三)盒子模型+问题处理
盒子模型从里到外:内容区、内填充、边框、外边距padding1、padding设置在内容和父元素之间,在父元素内部2、padding的作用:控制子元素在父元素里面的位置关系3、padding会把盒子撑大4、添加padding之后想让盒子保持原来的大小,需要在宽高的基础上减掉padding的值5、给单一方向设置padding的值:padding-top/right/bottom/left6、padding值的设置 一个值:四周 两个值:上下、左右 三个值:上、原创 2020-08-01 12:18:10 · 304 阅读 · 0 评论 -
(二)CSS基础+要点
CSS层叠样式表,用来给网页做样式渲染。css语法语法构成:选择符{属性 : 属性值; }1、声明必须放在大括号里面2、属性和属性值用冒号连接3、每一条声明结束用分号结尾4、如果一个属性有多个属性值的时候,属性值之间用空格隔开5、所有的css代码都需要放在css样式表中6、使用/* */来注释css样式表内部样式表创建方法:<style></style>放置的位置:尽量放在head标签中,一般放在title标签的下面外部样式表创建方法:创建原创 2020-08-01 11:44:02 · 224 阅读 · 0 评论 -
单排/多排图片横排效果margin处理
在网页中,有时需要编写多行带图片带文字带间距模块,就像下面这样:这是一个使用dl dt dd编写的,而dl之间的间距我们通常是先使用float浮动,然后再用margin-left或者margin-right来进行处理,最后再对头或者尾淡出处理,这样会比较麻烦,如果我们使用margin-right进行处理,再对每一行右侧超出的部分进行隐藏就可以了。1、将需要进行超出的margin部分进行隐藏的一整段代码使用div0包裹住2、对div0设置宽高,这里的宽高是包括超出的margin部分,这时候显示出来的依原创 2020-07-26 10:09:11 · 371 阅读 · 0 评论 -
img标签之间有间距
两张img图片放在一起,之间会有间距,而我们需要的是两张图片中间间距为0,以便使用我们计算好的间距。首先我们需要知道,img标签是一个inline属性的内联元素,内联元素具有文字的特性,会受到文字大小的影响,这里分为img标签上下排列和左右排列的情况。img标签左右排列处理空白间距方法:1、设置父元素的font-size为0;2、设置float3、使用负值margin消除间距img标签上下排列处理空白间距的方法:img标签具有文字的属性,首先需要去除行高line-height的影响1、原创 2020-07-25 09:45:14 · 1041 阅读 · 0 评论 -
a标签设置不了行高
在写一些链接的时候,我们需要将链接的行高设置为字体大小,以方便调整间距。但是在对a标签设置line-height的时候,虽然网页F12中显示的是没有错误,但是页面显示的依然是原来的行高。在解决问题之前我们需要了解display属性,常用的属性值有inlineblockinline-block他们的特点是inline 内联元素 都在一行显示,无法设置宽高,对于margin、padding只能设置左右方向,不能设置上下方向block 块级元素 每个块级元素都独占一行,可以设置大小,正常设置m原创 2020-07-24 21:52:22 · 1072 阅读 · 0 评论 -
(一)前端基础知识+常用标签
基础知识1、网页的组成:1:网页的结构:图片、文字、线条、超链接、视频2:网页的外观:美观、漂亮3:网页的行为:总结:网页的构成:结构、表现、行为2、WEB标准:制作网页的标准,web标准是一个集合体,一系列标准集合WEB标准:网页的结构:HTML语言 【 W3C 】网页的表现:CSS语言 【 W3C 】网页的行为:JavaScript [ js ] 【ECMA】补充:web标准由W3C(万维网联盟) 和原创 2020-07-23 10:20:00 · 197 阅读 · 0 评论 -
修改vscode感叹号自动生成的代码
每次自动生成的标准模板都要把lang="en"改成lang="zh-CN"想要把自动生成的模板改一下在 文件 -> 首选项 -> 设置 中搜索 emmet:Variables (复制即可)初始显示如上点击添加项 -> 修改即可修改之后的感叹号自动生成代码...原创 2020-07-22 21:28:23 · 6395 阅读 · 10 评论 -
为什么img可以添加大小
为什么img标签可以给它设置宽高?需要从置换元素的角度(非官方定义)思考首先了解一下什么是置换元素置换元素:通过属性或标签的类型来决定在页面中的显示状态,因为置换元素在页面渲染的过程中会生成一个框,这个框是能添加宽高的。例如img、input、textarea、select、object标签暂时的解释了img为什么可以添加宽高,之后的学习有新的思路再补。...原创 2020-06-26 01:40:44 · 173 阅读 · 0 评论 -
browser-sync : 无法加载文件 C:\Users\Peppa\AppData\Roaming\npm\browser-sync.ps1,因为在此系统上禁止运行 脚本。有关详细信息,请参阅
在系统左下角搜索右键管理员打开输入 set-ExecutionPolicy RemoteSigned按A回车原创 2020-03-11 16:05:55 · 391 阅读 · 0 评论 -
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
在vscode里面按Ctrl+~打开终端,输入npm -v 或其它命令显示无法运行,是因为没有使用管理员打开vscode,使用管理员打开vscode就可以了。原创 2020-03-11 15:09:43 · 35134 阅读 · 1 评论