- 博客(53)
- 收藏
- 关注
RSS订阅原创 JS实现：计算不同时区的当地时间
国内的时间都以北京时间为准（即东八区的时间），如何计算。还有另一种方法，就是先把本地时间转为 0时区的。通常的做法，是计算出时区差，然后进行加减。（世界标准时间），再进行计算，如下所示。其它时区的当地时间呢？
2024-06-25 16:05:15
225
原创 Property xxx does not exist on type ‘Window & typeof globalThis‘ 解决方法
出现以上typescript警告，是因为代码使用了window的。，即原生 window 对象上不存在该属性。文件不在src目录下，则需要在根目录的。文件中，指定其所在目录，如下图所示。下新建 xxx.d.ts。
2024-05-16 19:21:47
807
原创 百度/高德地图的自定义content中如何使用ReactDom写法
我们只需将其引入，然后把用ReactDom节点包起来即可。的作用仅仅是将 ReactDom 节点转为字符串，它并。（即 绑定在ReactDom上的事件 是无法生效的）。我们知道，在百度/高德地图中，有时需要加一些。函数（renderToString）二者的语法都差不多，但应用场景不同，（意味着只能用原生的写法）
2024-05-04 14:42:20
359
原创 JS实现：计算字符串的字节数（UTF8编码）
这种编码方式规定，1个Unicode字符占用1~4个字节（如上文JS代码所示），可兼容ASCII码，且由于其使用更合理的内存分配，因此内存占用比UTF-16更小。Unicode仅仅是一套字符集，并非编码，因为它没有定义 每个字符在计算机中的存储方式（即占用多少字节），而ASCII、UTF-8、UTF-16才算是编码。ASCII编码：由美国制定的一套字符集，也是一种编码方式，主要用于英语环境，对应了英文字母、数字、特殊字符和控制字符 等等，它规定1个字符只占用1个字节。），但没有定义1个字符占用多少字节。
2024-04-08 18:22:08
692
原创 代码回滚（git reset）后push失败的解决方法
相当于 --force-with-lease 命令，大致意思是 push 时会先帮你检查，只有当你要回滚的 本地commit节点 与 远端的commit节点完全一致，才能 push 上去。：相当于 --force 命令，更加简单粗暴，不作任何安全检查，直接 push 上去，并覆盖远端的 commit节点。代码本地回滚之后（即 git reset 到之前的某个历史节点），push上去失败，并报出以下错误信息。，登录远端的 git仓库，查看提交结果，如下图所示。，在Push界面，找到Force选项。
2023-12-30 16:12:13
1830
原创 苹果IOS系统webglcontextlost问题-解决方案
1.TypeError: Argument 1 ('shader') to WebGLRenderingContext.shader Source must be an instance of WebGLShader2.gl.createShader(x)返回结果变为 null
2023-11-03 16:25:56
1262
原创 React项目build打包后，页面空白的解决方案
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
2023-08-23 11:44:32
1982
原创 快速理解CSR、SSR、SSG、同构渲染（干货版）
CSR（客户端渲染）、SSR（服务端渲染）、SSG（静态站点生成，也叫预渲染）、同构渲染 都是什么
2023-01-31 15:37:47
825
原创 ES6的 import 和 export 用法总结
es6中把 import 和 export 的内容都当成模块看待。export 通常有以下 3种 写法。第1种：export 显式声明的变量1.同一文件中，可写多次 export2.导出的变量 必须是显式声明的例如 export {a: 1} 或 export [1, 2, 3] 都是语法错误的//lib.jsexport const num = 1;export const arr = [ 1, 2, 3 ];export const obj = { a: 1 };...
2022-05-20 21:15:01
1763
原创 JS中的this指向与箭头函数的理解
this 的作用是 指向 当前调用者（即 this 的指向并非固定的）。由于this的指向不定，容易引发bug，举个例子：class Test{ constructor(){ this.value = 1; } fn() { console.log(this.value); }}var ins = new Test(); //new出来的实例ins.fn(); //输出 1（因为this指向的当前调用者是ins，ins.v.
2022-05-05 20:06:34
328
原创 column-count瀑布流导致元素被截断-解决方法
css的 column-count 可使布局变为瀑布流，但默认情况下，子元素会被分割开<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa.
2022-03-28 19:30:04
2653
原创 TortoiseGit检测不到新增文件 导致无法提交-解决方法
用tortoiseGit在本地提交代码时，有时会出现检测不到新增文件的情况，导致新增文件无法提交。下面介绍2种解决方法，亲测有效。遇到的问题（如下图）：解决方法1（推荐）：先手动添加跟踪（如下图）然后再次提交，就可以看到了（如下图）解决方法2：直接在gitlab页面上添加 未检测到的文件方法2有个缺陷：即使指定了子目录，添加的文件 也会自动跑到根目录下（不知道别人会不会，反正我是这样），所以推荐方法1。...
2022-03-23 15:20:11
4879
原创 高德地图自定义样式不生效 解决方案（web前端）
最近在使用高德地图自定义样式的时候，发现一个奇怪的问题：使用官网的样式可以生效，但使用自定义样式就死活不生效，如下所示自定义地图 样式ID：使用样式：解决方案：如果后面接的是 样式id，必须加上安全密钥，就可以生效了。key和安全密钥：代码如下：const ref = useRef<HTMLDivElement>(null);const [map, setMap] = useState<any>();useMount(() =&g...
2022-01-11 11:14:58
10158
2
原创 网页攻击 和 跨域 的相关问题梳理
之前对XSS攻击和CSRF攻击了解地不透彻，导致有些原理似懂非懂。最近刚好查了一些资料，解开了心里的疑问，顺便在这记录一下
2021-12-13 21:26:11
2470
原创 win10前端项目部署到阿里云Nginx服务器（笔记）
首先，你要准备好阿里云的系统资源。以下是涉及的版本信息：centos系统版本：centos 8.2Nginx版本：1.14.11.打包成静态资源//将前端项目打包为静态资源yarn build 或者 npm run buildbuild成功后，静态资源如下：2.把所有静态资文件源压缩为zip包打包好上传比较快，当然也可以不打包，直接上传整个build文件夹内容。3.将zip包上传到阿里云centos系统首先，在win10系统上 下载并安装pscp工具（...
2021-12-01 20:26:31
987
原创 audio或video标签 autoplay无效 或 .play()报错问题 解决方案
video标签video标签设置 autoplay 无效，一般的解决办法是 在video标签上设置 muted 属性 即可。muted 属性是 静音的意思也就是说，想让video标签自动播放视频，必须先设置为静音。原因下面一起说。audio标签audio标签设置 autoplay 无效，或者在 js 中用 audio.play() 报以下错误：而且audio标签 即使设置了 muted 属性也不能自动播放（解决方法最后说）。原因分析其实从报错信息也可以了解到，DO..
2021-11-02 17:50:55
34479
13
原创 新版Chrome设置--disable-web-security无效 解决方法
先随便在某个目录下（比如 C盘），创建MyChromeDevUserData文件夹 选择 谷歌快捷方式，右键 - > 属性，添加以下代码即可：--args --disable-web-security --user-data-dir=C:\MyChromeDevUserData或--disable-web-security --user-data-dir=C:\MyChromeDevUserData最后，双击这个谷歌快捷方式，打开的浏览器 看到地址栏下方有一行提示，即跨越成..
2021-10-22 20:18:28
10809
6
原创 a标签设置下载文件名无效解决方法
设置 a标签的 download属性，可以重置 文件名。如下代码，文件名重置为 file.xlsx。<a href='http://192.168.1.1/abcd.xlsx' download='file.xlsx'>下载</a>这种写法有个前提：href 的下载地址 和 当前网站地址 必须是 同源的，否则download不生效。如果不同源，还有一种方法，代码如下：// 封装一个download方法const download = () => {...
2021-10-18 11:21:19
4586
4
原创 Scss或Less中:global{...}的作用
在React项目中，样式语言无论是用scss或less，如果想让 样式 仅作用在某个组件，而不影响全局，一般都会把样式文件进行模块化，即打包后每个class名都会被自动加上一串唯一的序列号。假如 想让某个class不加序列号，可以作用到其他组件，那么就写到:global { ... } 中即可，如下图的例子：/* 在test.module.scss文件中 */.main { width: 100px; :global { .ant-popover-title{ ...
2021-10-15 13:04:28
20310
原创 flex:auto元素内容超出显示省略号设置无效 解决方案
举个例子：content元素的 width 为 200px（即下图 黄色背景），中间有两层div，分别是 aaa 和 bbb，都是flex布局，且没设置width，最里面一层有个p 元素。要求：p 元素的 宽度 根据 内容的长度 自适应； 若 p 元素内容超长，则显示为省略号；问题：从上图可以看出，内容超出时，虽然设置了css样式，但并没有变成 省略号。解决方案：p元素加多一个 width: 0 即可。如下图：注意：width的值可以随便设置，只要不是百分比类的单位( 如vw，%..
2021-10-13 21:31:32
4676
原创 SVG图片颜色设置无效解决方法-前端
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可：在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor"拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。举个例子：//父元素设置red无.
2021-09-08 19:54:48
18059
3
原创 不可变数组的范围求和的方法实现
给定一个整数数组 nums，计算出从第 i 个元素到第 j 个元素的和 ( i ≤ j )，包括 nums[ i ] 和 nums[ j ]例子：const nums = Object.freeze([-2, 0, 3, -5, 2, -1]); sumRange(0, 2) -> 1sumRange(2, 5) -> -1sumRange(0, 5) -> -3 假定数组的值不会改变（如上面代码，nums 因为 Object.freeze 的缘故可读不可写）
2021-04-09 23:06:34
265
原创 如何实现自定义链式调用
解决思路（分2步）：实现链式调用：其实就是要把this返回即可。 依次执行每个链式函数的事件：用一个队列将这些事件函数存起来，在链式函数全部执行完后，再依次执行队列里的事件函数。代码实现：function Man(){ this.queue = []; return this;}Man.prototype.next = function(){ const fn = this.queue.shift(); fn && fn();}Man..
2021-04-08 23:34:37
349
原创 常见前端面试题总结
1.undefined和null的区别是什么 答：typeof(null)是'object',typeof(undefined)是'undefined'2.Number(null) Number(undefined)输出什么 答：0和NaN3.Array.constructor == Object输出什么 答：false4.如何用闭包的方式让其输出0,1,2,3,4for(var i=0;i<5;i++){ setTimeout(()=>{ con...
2021-04-06 02:31:31
638
原创 Typescript+React学习笔记（三）- 实战要点
1. !default的含义!default 是 scss 提供的关键字，它的作用是指定某个变量的默认值，当用户在其他地方修改这个变量时，原有的默认值将全不生效2.带下划线的scss文件例如：_xxx.scss带下划线的scss文件表示，只能被 @import 引入使用（引入时不用加下划线，如 @import xxx.scss），而不能被单独编译成css文件3.normalize.css由于不同浏览器对自身元素基本样式（如margin，padding等等）的定义不尽相同，normalize.cs
2021-03-25 16:01:09
193
原创 Git拉代码被拒绝并提示认证错误
windows系统中，如果 Git 出现认证错误，又无法重新输入账号密码时，可以到 ‘控制面板’-‘凭据管理器’-‘windows凭据’ 把对应的git地址凭据删掉，然后git clone就可以重新输入账号密码了，如下图：...
2021-03-02 17:27:10
591
原创 React日常学习笔记
React学习笔记1.Fragments//完整写法<React.Fragment key={...}> <div></div></React.Fragment>//简写<> <div></div></>注意：简写 不接受 任何属性，完整写法只能接收 key属性（用于遍历）...
2021-02-19 12:15:25
177
原创 vue的.env.development文件中如何添加新变量
vue的.env.development文件中如何添加新变量# 开发环境ENV = 'development'# 注释VUE_APP_BASE_API = 'http://10.1.9.105:8886/api'# 定义其他变量VUE_APP_XXX = 'http://10.1.9.105:8188'注意：定义其他变量必须以 VUE_APP_ 开头，且改完必须重新 npm run dev...
2021-01-22 17:39:41
1484
原创 编程笔记：给出一个正整数，求解满足上面公式的所有算式组合
题目描述给定一个正整数，我们可以定义出下面的公式:N=a[1]+a[2]+a[3]+…+a[m];a[i]>0,1<=m<=N;对于一个正整数，求解满足上面公式的所有算式组合，如，对于整数 4 :4= 4;4 = 3 + 1;4 = 2 + 2;4 = 2 + 1 + 1;4 = 1 + 1 + 1 + 1;所以上面的结果是 5 。注意：对于 “4 = 3 + 1” 和 “4 = 1 + 3”，这两处算式实际上是同一个组合!输入41020输出54262
2021-01-20 20:43:03
2083
原创 Typescript+React学习笔记（二）- hook相关内容
1.npx的作用避免安装全局模块可直接调用项目内部安装的模块比如模块mocha，如果用npm install mocha仅安装在局部的话，在命令行中输入 mocha --version 会显示找不到命令的（当然，也可以先在命令行中，手动指定目录来找到，如 node_modules/.bin/mocha --version），这时可以用 npx mocha --version 在全局使用该命令2.函数组件的类型描述import React from 'react';interface IT
2021-01-20 10:57:11
221
原创 Typescript+React学习笔记（一）- typescript相关内容
1.安装typescriptnpm install -g typescript2.编译ts文件，将ts文件编译成js文件tsc xxx.ts3.ts-node (用于快速运行ts文件)默认情况下，执行ts文件，需要先 tsc xxx.ts 将文件转化为 xxx.js文件，然后用 node xxx.js 才能执行 用ts-node则可以一步到位，如：ts-node xxx.ts4.特殊类型any：声明为任何类型void：声明为什么类型都不是(一般用在声明函数的返回值)nul
2021-01-19 19:55:25
225
原创 提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题
参考文档：https://www.cnblogs.com/songbw/p/11807460.html
2021-01-09 16:36:15
239
原创 vue的$axios请求设置为form表单类型
在$axios中设置请求头即可，如下所示：//入参用字符串const params = 'name=aaa&value=123';//设置$axios的第3个参数this.$axios.post('你的接口', params, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}) .then(res => {}) .catch
2020-12-26 10:22:32
963
原创 html2Canvas使用问题汇总
使用html2Canvas导出的图片有时会显示不出来，根据官网的说法，只要设置useCORS 为 true，allowTaint 为 true 即可，如下：new html2canvas(document.getElementById('test'), { backgroundColor: null, //使用透明背景 useCORS: true, //是否允许使用跨域图片 allowTaint: true, //是否允许跨域的图片渲染到ca..
2020-11-28 17:15:29
909
原创 批量下载网页局部图片
//批量下载哪个部位的图片，看情况改var imgs = document.getElementById('divProduct').getElementsByTagName('img');var total = imgs.length;var curr = 10;function savePic(){ if(curr <= total){ for(let i=curr-10; i<curr; i++){ downloadImg(imgs[i].src.
2020-11-02 18:13:45
362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人