- 博客(46)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 react项目路由组件懒加载方法对比，@loadable/component和react-loadable和suspense lazy
1.使用@loadable/component方法：推荐使用这个npm install @loadable/component -S 先安装一下2.在app.js中引入@loadable/componentimport Loadable from '@loadable/component'3. 引入组件const Home=Loadable(()=>import('./views/Home.jsx'));const Log...
2021-11-12 16:32:59
3180
原创 节流防抖函数封装
//封装节流函数 function throttle(callback,delay){ var last=0; return function(){ arg=arguments; var that=this if(Date.now()-last>delay){ callback.apply(that,arg); last=Date.now() ...
2021-11-09 16:26:22
322
原创 vue项目打包部署到服务器子目录二级目录。
1.先在vue.config.js文件里面把静态文件打包路径修改一下成为相对路径。publicPath：'./' 改成'./'即可如果用了环境变量就按照我下图写。2.由于打包后的文件不是放在服务器的根目录所以在路由配置时候设置一下基础路径。我的文件路径前面加 /WEB/vuedemo/,大家根据自己的子目录路径写就行。如根木录下面的abc文件夹：https://baidu.com/abc写为：base:'/abc/'...
2021-11-08 17:13:12
4744
原创 react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。解决办法，在page.json文件里面增加一行："homepage": "./",2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。解决方法：react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径我的文件位置/WEB/reactdemo,:打开页面浏览器显示的地址：htt.
2021-11-08 14:49:32
8054
原创 记录一下pageX，offsetX，clientX，offsetLeft，offsetWidth，pageYoffset，scrollTop,scrollY，等。原文摘自MDN文档库。保证正确。
这几个属性其实都好理解，但是太多了很容易忘记又记混了。所以从MDN里面摘抄一下。保证记住。目录1.MouseEvent.pageX2.MouseEvent.offsetX3.MouseEvent.clientX4.HTMLElement.offsetLeft5.Element.getBoundingClientRect()6.Element.clientWidth7.Element.scrollTop8.Window.scrollY9.Window.pageYOffs
2021-11-04 10:52:08
1225
原创 react项目安装redux-devtools插件方法教程，亲测有效。
react项目用到redux。使用redux-devtools工具可以在谷歌Chrome浏览器方便的查看项目的信息。看到别人文章各种安装太麻烦，主要是插件难下载。于是亲自安装一下。（我把插件保存在网盘里面：永久有效：百度网盘：链接: https://pan.baidu.com/s/1Yc5_nTQuMv0DsJQmwibOtw提取码: jqnf 复制这段内容后打开百度网盘手机App，操作更方便哦）工具界面效果是这样。和vue-devtools有点像。安装方...
2021-09-23 14:53:01
1951
1
原创 升级node版本导致各种奇怪问题，create-react-app和vue create失败。npm install node-sass -D 安装失败，cnpm也失败。解决方法升级node版本。
今天写个react项目本想使用scss来写样式。于是使用。npm install node-sass -D来安装。结果失败。以为是网络问题于是：cnpm install node-sass -D 也是失败。后来百度一下查到一个方法：npm install -g cnpm --registry=https://registry.npm.taobao.org也失败了。可能别人成功了。仔细看了报错。提示node版本低了。于是升级node版本。成功解决。之前的报错截图。升级node...
2021-09-15 18:17:37
778
原创 react项目自定义路由守卫。路由拦截。可copy思路。方法比较简洁。
通常vue项目框架自带路由守卫很方便，而react需要自己收到写一下。步骤。1：先在app.js文件写一个路由数组（有点类似vue的写法）。import引入组件。auth为是否需要登录验证才能访问。默认login和home，无需验证登也可以访问。然后再自己建一个组件。我们在这个组件接收routes这个数组。js逻辑返回路由。我写了个Beforeroute.jsx的组件。引入app.js组件中。记得包裹在switch组件或者router组件中。2.我们js逻辑主要在这个Beforerou.
2021-09-14 20:09:23
337
原创 js数字转变成中文大写数字，壹千零贰拾肆，完美
直接复制我写的函数就可以调用。数值不超过1万万亿。超过了我不知道怎么称呼后面的单位了。除了银河计算机才会出现超大数据。如图：ntc(6102400112089609) 结果：ntc(num){//数值要小于1万万亿，多了超过位数。varchin=['元','拾','百','千','万','拾','百','千','亿','拾','百','千','万','拾','百','千'];//数字变字符串varnums=num+'';...
2021-09-07 20:19:02
269
原创 前端生成唯一GUID，生成32位唯一标识码
方法很简单，使用函数如下：functionguid(){return'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){varr=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);returnv.toString...
2021-07-09 10:28:44
2773
原创 关于vscode编辑器，使用查找功能时出现两个窗口，自动拆分屏use Replace Preview
最近发现使用vscode的查找功能时，编辑器总是自动拆分成两个屏幕，甚为不爽。经多次百度得知。vscode里面可以设置不显示。搜索时候自动分屏（我不想要）：上图解决步骤如下。文件--首选项-设置然后搜索框输入：useReplace即可找到 use Replace Preview，取消勾选就可以。如图：...
2021-06-22 11:23:44
3208
1
原创 巧用css的滤镜filter属性处理图片，高斯模糊，HTML页面黑白滤镜等
效果如下：使用css的filter滤镜属性。可以巧妙的设置图片高斯模糊和特效。包括灰色纪念清明节等悼念烈士英雄灰白效果。<imgclass='testimg'src="./img/xxx.png"alt="">悼念效果如下设置：一行代码即可。html{filter:grayscale(100%);-moz-filter:grayscale(100%);-o-filter:grayscale(100%);-webkit-filter:...
2021-05-06 16:34:46
235
原创 关于video标签，禁止点击播放时自动全屏，和video出现诡异窗口重叠
加上x5-playsinline属性或者x5-video-player-type=“h5”，都可以禁用全屏，其中x5-video-player-type="h5"可以解决视频层级过高问题。我的代码如下：<videowidth="100%"height="100%"id="video"style="object-fit:contain;"controlswebkit-playsinline="true"playsinline="true"x5-video-play...
2021-04-29 16:49:33
3124
1
原创 全局获取自定义属性值data-xxx,data-event；数据埋点，行为统计
记录一下，全局不确定元素，绑定一些自定义属性。当点击的时候获取自定义值，进行后续相关操作。主要通过window全局绑定click事件获取元素当前e，然后遍历其父元素是否有data-event自定义属性。<divclass='box'><p>测试自定义属性</p> <div data-event='aaabbb'>测试信息</div><divclass='b...
2021-04-02 11:34:42
964
原创 拖拽进度条，完整demo，可复制使用。offsetLeft,touchstart,touchmove,touchend结合拖拽
如下为完整demo代码。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0">...
2021-04-01 19:01:39
337
原创 完美解决audio自定义修改样式。完整demo，可直接复用copy。修改默认样式
这个是完整demo，可以复用。请把代码直接复制，打开页面查看效果更好。知识点在下方。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>样式修改</title&...
2020-12-29 11:20:24
6317
2
原创 vscode 打开新文件会覆盖旧文件的解决办法，避免覆盖（简单完美解决）
vscode 打开新文件会覆盖旧文件很少烦人。解决方案：1。每次要打开的文件双击就可以。这样双击打开的文件不会覆盖。单机打开的文件会覆盖，其实也是避免打开的文件编辑窗口太多。2。最佳方法：在vscode里面设置。 打开编辑器页面：找到 文件----》 首选项---》 设置--》 然后搜索Enable Preview这个设置选项。找到Workbench>Editor:Enable Preview这个关闭就可以。是不是很简单。（在下图第二个选项，关闭就可以）操作如图：...
2020-08-28 11:04:28
7030
1
原创 js实现农历和公历相互转换（完整demo）
项目有个小需求：公历农历转换。直接上demo小例子：复制就可以运行。使用方法：公历转农历：将2020年5月31日转换成农历--------calendarFormatter.solar2lunar(2020,5,31);农历转公历：将2020年农历七月初八转换成农历--------calendarFormatter.lunar2solar(2020,7,8);需要引入一个js文件，<scriptsrc='./calendar.js'></script>我附...
2020-07-08 14:07:32
4102
1
转载 前端Cookie基本使用方法
CookieCookie 历来指就着牛奶一起吃的点心。然而，在因特网内，“Cookie”这个字有了完全不同的意思。那么“Cookie”到底是什么呢？“Cookie”是小量信息，由网络服务器发送出来以存储在网络浏览器上，从而下次这位独一无二的访客又回到该网络服务器时，可从该浏览器读回此信息。这是很有用的，让浏览器记住这位访客的特定信息，如上次访问的位置、花费的时间或用户首选项（如样式表）。Cookie 是个存储在浏览器目录的文本文件，当浏览器运行时，存储在 RAM 中。一旦你从该网站或网络服务器退出，Coo
2020-06-29 15:45:30
445
原创 H5前端页面实现分享到微信、qq、新浪功能。微信分享（完整demo）nativeShare.js
1.主要实现通过前端在页面中实现分享功能。依赖了一段nativeShare.js文件。（我放在文章最后面，直接复制就可）参考了他人写法，我自己修改了页面效果，现在更简洁。大家如果使用直接复制我的nativeShare.js就可以无需修改。2.使用方法。html中写一个标签：<divid="nativeShare"data-app=""class="more">分享按钮</div>；more是我的按钮样式无所谓。...
2020-06-17 10:51:32
9310
2
原创 网站判断用户设备是移动端还是PC 端，自动跳转到相应网站。识别移动端
1.先判断用户的设备浏览器版本信息，是否匹配mobileAgent数组（常用移动浏览器系列）。只要是移动端就自动转入相应网站。<script type="text/javascript">var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucwe
2020-06-17 10:21:30
912
原创 H5的video视频播放标签。基础常用功能实现
效果如图，有几个小功能；视频自己准备本地视频就好，格式要MP4格式。相关知识可参考：https://blog.csdn.net/cxws110/article/details/84138572?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159126217119725247649177%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_i
2020-06-04 19:58:38
714
原创 记录波浪svg动画效果
效果如下：直接拷贝代码放在div元素里面就会生效。<divstyle="transform:scale(0.5)"><svgwidth="200px"height="200px"version="1.1"xmlns="http://www.w3.org/2000/svg"><textclass="liquidFillGaugeText"text-anchor="middle"font-size="4...
2020-05-21 10:09:25
196
原创 js修改scss变量，达到全局改变颜色。（全局baseColor变量改变）
1.先写一个scss文件，命名几个变量。重点是第一、二个写法带有一个var（参数1，参数2）。参数1随意命名后面用来指定修改。2.将写好的scss文件引用到你想用的vue组件。3.一切都正常使用了这个scss变量。$bgColor;现在我想改变这个变量颜色。注意：修改的是scss文件的变量，是全局性的，任何vue组件使用了这个$bgColor变量都会一起修改了样式效果。js操作如下：document.getElementsByTagName('body')[0].style.
2020-05-15 16:34:54
7514
9
原创 git一些工作中用到的命令(实用)
1.1git push将本地分支推送到远程分支（可以自动创建远程新分支）$ git push <远程主机名> <本地分支名>:<远程分支名>比如我要将本地的shop分支推送到远程shop分支git push origin shop:shop1.2 git 创建分支,建立远程联系1,从已有的分支创建新的分支(如从master分支),创建一个de...
2020-05-08 17:02:10
114
原创 光线动画linear-gradient（demo）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>光...
2020-04-29 15:07:20
679
原创 html页面调用手机短信功能，判断安卓、苹果、微信（完整demo）
在HTML页面发送短信功能。先判断一下手机是安卓还是苹果。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=...
2020-04-27 16:41:22
775
原创 将图片变成canvas，可以利用canvas转变成dataUrl格式，方便上传
将图片变成canvas，可以利用canvas转变成dataUrl格式，方便上传，记录一下。demo完整<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=dev...
2020-04-27 15:46:00
679
原创 animation动画 小球变色变大运动css3
小球动画效果演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><tit...
2020-04-23 15:30:16
519
原创 HTML页面截屏，完整demo，html2canvas，二维码生成，头像上传
这个是完整的HTML页面截屏。截屏主要用到html2canvas这个js库。本文章涉及3个小功能：1.用qrcode生成带logo二维码。2.头像上传功能。3html页面截屏功能。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><met...
2020-04-14 19:01:12
534
原创 原生js上传头像功能（base64）（完整demo）
用原生js实现上传头像，原理是通过newFileReader();将图片转换成base64格式的一长串字符串。将字符串提交给后台即可。就是这个字符串代替img路径src实现图片显示。完整demo：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">...
2020-04-09 18:39:34
711
2
原创 原生js下拉刷新功能（jquery）。（完整demo）
这个完整的代码。触摸下拉可以刷新。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">...
2020-04-08 16:20:36
722
原创 时钟分数，动态分数。刻度变化动画效果（完整demo）
这个小项目的全部代码。模仿360测试分数。动态效果。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,...
2020-03-30 18:23:10
420
原创 移动端touch事件，实时获取touchmove移动下的最新元素
手指移动实时获取当前的最新元素。不是touchstart的元素。（完整小demo）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实验一个移动获取内部数据</title> <style> ...
2019-07-18 22:28:57
1193
转载 JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解getBoundingClientRect()这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。var box=document.getElementById('box'); // 获取元素alert(b...
2019-05-27 18:41:08
224
转载 git常用操作及其基本命令
git常用操作及其基本命令 克隆远程仓库代码到本地 本地创建有文件夹 git clone 远程仓库地址 本地文件夹名称 本地没有创建文件夹 git clone 远程仓库地址 文件夹名称 克隆完成之后，使用“cd 文件夹”的方式进入，然后执行git init初始化本地仓库 查看远程仓库 git remote -v 可以看到远程仓库的名称以及对应的地址...
2019-05-19 11:54:50
86
原创 原生js封装ajax实现模仿jquery的ajax()方法 实现json和jsonp跨域
function ajax(obj){ var defaults = { type : 'get', async : true, url : '#', dataType : 'text', jsonp : 'callback', data : {}, success:funct...
2019-03-19 15:37:40
163
原创 如何文字垂直水平居中，使用vertical-align。
今天实验了一下使用vertical-align来进行文字垂直方向的居中，先对目标内容进行设置display：table-cell.单行文本和多行文本都可以。2。以前单行文本可以直接使用： line-height=盒子高度。来达到垂直方向的居中。具体简单代码如下。<!DOCTYPE html><html><head lang="en"> <met...
2018-09-22 23:54:12
1499
html5shiv包，完美解决IE8等不支持H5标签问题
2019-02-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人