![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 58
司徒小北
这个作者很懒,什么都没留下…
展开
-
JS 生成唯一UUID的几种方法
在开发中偶尔会遇到需要生成唯一id的时候,比如对数组的任意一项进行多次增删改,这时就需要给每一项添加唯一标识符来加以区分。以下总结了几种生成唯一标识的方法,仅供参考。原创 2023-02-11 11:12:12 · 1335 阅读 · 0 评论 -
ES6的一些常用用法思考
恰好,这位leader有代码洁癖,面对3~5年经验的成员,还写这种水平的代码,极为不满,不断对代码进行吐槽。不是不用ES6的解构赋值,而是服务端返回的数据对象中的属性名不是我想要的,这样取值,不是还得重新创建个遍历赋值。在项目中,一些没分页的列表的搜索功能由前端来实现,搜索一般分为精确搜索和模糊搜索。欢迎来对以上十点leader的吐槽进行反驳,你的反驳如果有道理的,下次代码评审会上,我替你反驳。原创 2023-02-03 16:32:34 · 379 阅读 · 1 评论 -
indexedDB存储
随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。原创 2023-02-02 15:28:18 · 903 阅读 · 0 评论 -
一个关于image访问图片跨域的问题
通过 'img' 加载的图片,浏览器默认情况下会将其缓存起来。当我们从 JS 的代码中创建的 'img' 再去访问同一个图片时,浏览器就不会再发起新的请求,而是直接访问缓存的图片。但是由于 JS 中的 'img' 设置了 crossorigin,也就意味着它将要以 CORS 的方式请求,但缓存中的图片显然不是的,所以浏览器直接就拒绝了。连网络请求都没有发起。原创 2023-01-16 17:34:52 · 7174 阅读 · 1 评论 -
JS 点击某元素以外的地方触发事件
本来就只是使用e.target就行了,但是点击事件的target的机制问题,单纯地使用e.target并不能根本解决这个问题,因为目标区域内可能有很多的元素,这个点击事件会选择其内部的元素,就举当前的html代码为例子,现在我的目标区域demo内有一个p标签,如果我点到这个p标签,e.target会指向这个p标签,而不会去指向这个demo元素。点击颜色画板之外的区域,隐藏颜色画板。这个功能多用于关闭自己设置的弹窗,设置好最外层的判断元素,点击弹窗之外,弹窗就会关闭,这个在用户体验方面是非常有利的一个功能。原创 2023-01-16 17:23:53 · 1988 阅读 · 1 评论 -
JavaScript判断设备类型
判断设备类型,兼容了部分ipad上有开启电脑模式的操作,导致设备被识别为ipad而不是windows或者其他。原创 2023-01-13 17:15:07 · 583 阅读 · 0 评论 -
JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题
当我们在加载一个线上mp3地址或者获取audio的duration的时候,会发现有拿到duration是Infinity的情况,这时如果我们动态的展示录音时间时候就会有问题。首先明确一下这是chrome浏览器自己的存在的一个bug,因为我们拿到的录音数据流没有定义长度,所以浏览器无法解析出当前音频的时长。原创 2022-12-08 22:14:04 · 5498 阅读 · 1 评论 -
flv.js简单使用示例
播放器,纯原生JavaScript开发(ECMAScript6编写),没有用到Flash。,通过MediaSourceExtensions喂给浏览器,实现了FLV格式视频的播放。它的工作原理是Flv.js在JavaScript中流式解析flv文件流,并实时转封装为。在下载好的文件夹中找到dist文件夹中的flv.min.js复制出来。如果你已经安装了nodejs可以使用npm来安装flv.js。当然你也可以使用其他方式进行下载。可以使用简单的服务器测试。...原创 2022-07-18 18:57:46 · 4137 阅读 · 0 评论 -
input修改自动填充背景色
input 修改自动填充背景色原创 2022-06-28 16:40:28 · 1649 阅读 · 0 评论 -
JS检测客户端是否安装
JS检测客户端是否安装原创 2022-06-02 18:00:12 · 1225 阅读 · 2 评论 -
用html2canvas遇到因为有滚动条截图不完整问题的解决方法
本文章向大家介绍在vue项目中用html2canvas遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight),需要的朋友可以参考一下。1、安装npm install html2canvas --save2、使用import html2canvas from 'html2canvas';基本逻辑html2canvas(document.getElementById('demo'), { backgroundColor: '...原创 2022-05-27 15:47:38 · 9435 阅读 · 9 评论 -
数字金额和汉字金额大写转换方法
前端:方法一(简单粗暴):function digitUppercase(num) { var strOutput = ""; var strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分'; num += "00"; var intPos = num.indexOf('.'); if (intPos >= 0) num = num.substring(0, intPos) + num.substr(intPos + 1, 2); strUnit = strU原创 2022-05-09 11:44:35 · 645 阅读 · 0 评论 -
React 模拟实现全局Toast提示
用react模拟一个toast提示框,提示的位置可挂载到指定的dom,不指定dom的话默认会挂载到body上,具体逻辑自行调整即可效果如下:实现逻辑,index.tsximport React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, Ref } from 'react';import styles from './index.less';import ReactDOM from 're...原创 2022-05-09 11:21:35 · 1055 阅读 · 3 评论 -
Table表格、列表 滚动加载实现
方案一:给table起一个className,监听当前table下的.ant-table-body元素的滚动(推荐)主要实现逻辑:1、在table外包一个div,添加滚动事件onScrollCapture2、给table起一个类名,目的是为了获取table下ant-table-body的元素:let element = document.querySelectorAll(`.tableRect .ant-table-body`)[0]3、判断依据 element.scr原创 2022-05-09 11:06:17 · 3463 阅读 · 0 评论 -
【视频测试地址】各类视频(mp4、flv、mkv、3gp、hls-m3u8、rtsp、rtmp)测试地址摘录
由于我们在做流媒体项目的时候,经常需要用到视频链接做测试用,所以这里为大家找了一些可以使用的链公大家参考测试,链接收集于网络。如有失效请更换下一个链接。FLV视频链接如下:https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flvhttps://sample-videos.com/video123/flv/720/big_buck_bunny_720p_2mb.flvhttps://sample-video原创 2022-05-07 18:25:27 · 70251 阅读 · 2 评论 -
js删除对象/数组中null、undefined、空对象及空数组方法示例
如下,对于一个多层嵌套的数据结构:例如要做的就是删除所有value为空,数组为空,对象为空的字段const querys = { name: '测试', httpMethod: '', httpHeaders: [ { key: 'Accept', value: 'test', }, ], restParams: [ { key: '', value: '', }, ], body: {原创 2022-04-27 13:45:40 · 18615 阅读 · 1 评论 -
点击其他区域,隐藏弹窗或各种元素的原理
点击其他区域,隐藏弹窗或各种元素的原理原创 2022-04-26 14:30:51 · 1908 阅读 · 0 评论 -
react 搜索实现高亮
为了增加用户体验,都会提供一个快速搜索的功能,以便用户快速定位,但是如果进行模糊匹配的话,希望输入的关键字在搜出来的数据里面进行高亮展示,提高用户体验技术点1. font 标签// 利用font标签可以规定文本字体、大小和颜色<font color="red" size="5" face="arial" >测试</font>2. dangerouslySetInnerHTML (直接在React中设置 HTML)react 官网文档提供方法,是 Re原创 2022-01-20 16:43:08 · 2042 阅读 · 0 评论 -
正则删除字符串左、右或两端的空格经验总结
1、消除字符串左边的空格function leftTrim(str){ return str.replace(/^\s*/,"");//^符号表示从开头即左边进行匹配 } 2、消除字符串右边的空格function rightTrim(str){ return str.replace(/\s*$/,""); } 3、消除字符串两边的空格function trim(str){ return str.replace(/(^\s*)|(\s*$)/g,"");}原创 2022-01-07 18:40:38 · 1183 阅读 · 0 评论 -
css 文本超出就隐藏并且显示省略号
一、单行文本溢出显示省略号overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行二、多行文本溢出显示省略号overflow: hidden;text-overflow: ellipsis;display:-webkit-box; //作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直原创 2021-12-23 12:58:26 · 977 阅读 · 0 评论 -
按需处理改造tree数据的方法
一:格式化tree调用方法:const formatedData = formatData("后台tree数据");return的数据按照自己需求修改即可,改造成自己需要的tree结构,如下将permissions格式化为children等const formatData = (data, rootId) => { return data.map((item) => { const systemId = item.systemId || rootId;原创 2021-12-17 15:49:23 · 1129 阅读 · 0 评论 -
密码校验常用正则表达式
至少八个字符,至少一个字母和一个数字:"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"至少八个字符,至少一个字母,一个数字和一个特殊字符:"^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$"最少八个字符,至少一个大写字母,一个小写字母和一个数字:"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"至少八原创 2021-12-15 18:18:35 · 9422 阅读 · 0 评论 -
input输入框只能输入数字且保留两位小数场景演练(金额)
以下方法看自己用的ui需求的需求增加不同的方法1、给文本框增加一个onChange方法,// 针对输入的金额做特殊处理const onCustomMoneyValidate = (e) => { e.target.value = e.target.value.replace(/[^\d.]/g, ''); // 只能输入"数字"和"." e.target.value = e.target.value.replace(/^\./g, ''); // 第一位字符不能为"."原创 2021-11-20 18:16:01 · 963 阅读 · 0 评论 -
Iframe父页面子页面通信
iframe子页面与父页面通信方案一:父页面(调用iframe的页面)第一步:页面中引入iframe<iframe id="PanIframe" ref={iframeRef} frameBorder={0} width={960} height={600} marginHeight={0} scrolling="no" sr原创 2021-09-30 13:50:12 · 2720 阅读 · 0 评论 -
pdf预览pdfh5
<template> <div class="container"> <div id="pdfWrap"></div> </div></template><script>import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";export default { components: {}, data() { re...原创 2021-04-20 15:32:52 · 6934 阅读 · 2 评论 -
canvas生成自定义大小图片
场景:比如移动端签名,一张canvas画布,在任意位置书写之后,生成一张图片,如果这种图片要放到某一个签名的位置会显的特别大,我们来解决这个问题一、生成canvas图片通过 canvas.toDataURL('image/png', 1) 生成一张base64的canvas图片,也可以是你自己的其他图片二、将原图转换为自定义大小的图片/** * resize 生成自定义大小的图片 * @param {String} datas 图片原文件 * @param {Num.原创 2021-04-20 11:22:58 · 4824 阅读 · 0 评论 -
vue 中使用vue-introjs做引导动画
先看页面效果:1、不做任何样式修改,vue-introjs默认的样式效果如下:可以配置title,跳过,上一步,下一步等2、修改修改样式,根据自己需求去做效果如下:web端和h5都可以使用,具体用法如下:一、npm安装vue-introjs是在Vue中绑定intro.js所使用的。vue-introjs中没有内置intro.js,所以在使用前请确保已安装intro.js。npm i intro.jsnpm i vue-introjs二、webpack配...原创 2021-03-24 14:33:02 · 2297 阅读 · 0 评论 -
vue中页面分页引导
一:使用driver.js做页面分页引导npm 安装: npm install driver.js如果项目中只有单个页面引导,只需要在单个页面中做配置就行如果有多个页面需要做引导,直接在mian.js 里面配置即可import Driver from "driver.js"import "driver.js/dist/driver.min.css"//直接封装一下:Vue.prototype.$Driver = new Driver({ classname:"sco..原创 2021-03-23 19:04:16 · 1913 阅读 · 0 评论 -
区分浏览器关闭和刷新
其实本身浏览器关闭和刷新没有区别的太开,下面介绍两种场景,逻辑一是关闭页面时需要区分出是刷新还是关闭,逻辑二是进入页面时需要区分刷新还是重新进入页面,下面结合实例看一下先介绍几个会用到的事件onload:页面载入时触发 onbeforeunload: 在即将离开页面(刷新或关闭)时触发 onunload: 退出页面时触发,已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用页面加载时只执行onload页面关闭时先执行onbeforeunload,最后onun...原创 2021-02-04 18:50:20 · 3043 阅读 · 1 评论 -
js问号点操作符【?. 】(可选链 双问号)
1、看下面代码let dataList = res && res.data && res.data.list看着非常不美观,今天介绍的新语法就是为了解决这种问题的2、可选链操作符?.使用新语法重新写一下上面代码let dataList = res?.data?.list这样写看着就很简洁了。还有,如果想设置默认值应该怎么写?以前的写法:let dataList = res && res.data || []现在的写法原创 2020-12-31 11:36:10 · 6199 阅读 · 2 评论 -
使用JSZip实现压缩文件与图片
JSZip简介JSZip是一个用于创建、读取和编辑.zip文件的javascript库,有一个可爱而简单的API。JSZip支持Nodejs和浏览器端的安装使用。具体方法如下:npm install jszipnpm install file-saver浏览器端解压zip文件后端Nodejs将zip文件以二进制形式存储到数据库中。当前端需要该zip文件时,后端将zip文件以二进制形式传输到前端,前端再解压还原。使用JSZip压缩文件import JSZip from 'j原创 2020-08-21 18:34:12 · 7203 阅读 · 0 评论 -
es6 中的Map和Set
1、Map:对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。const m = new Map();const o = {p: 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // false2、Map和Object的区别 一个Object的键只能......原创 2020-08-07 10:26:27 · 393 阅读 · 0 评论 -
JavaScript 优化判断条件
一、前奏:我们一般在遇到复杂逻辑判断时,第一时间想到的处理方案是用if/else/switch等来实现多个条件判断逻辑处理,但是随着判断条件的增多,代码中的判断条件会越来越来越臃肿,越来越不可读不可维护,下面探讨如何更优雅的写判断逻辑。1、if/else方式: 如键盘按键 const publicKeyboardShortcuts = (evt: KeyboardEvent) => { if(evt.keyCode == 1){ onKeyDownActive('o原创 2020-08-06 13:26:26 · 1589 阅读 · 2 评论 -
LottieJS动画在项目上的基本使用
一、简单介绍:lottie是一个跨平台的动画库,通过AE(After Effects)制作动画,再通过AE插件Bodymovin导出Json文件,最终各个终端解析这个Json文件,还原动画。本文中我只介绍前端用到的库lottie-web。lottie是一个不太占体积,还原度高,对于初学者友好的库。设计师制作好动画,并且利用Bodymovin插件导出Json文件。而前端直接引用lottie-web库即可,它默认的渲染方式是svg,原理就是用JS操作Svg API。但是前端完全不需要关心动画的过程,Js原创 2020-08-03 15:44:28 · 5288 阅读 · 0 评论 -
jspdf用法
介绍一下纯jspdf用法,将一个图片列表导出为pdf文件,根据图片宽高计算在pdf中的位置jsPDF 是一个基于HTML5的客户端解决方案,用于生成各种用途的 PDF 文档。官网地址:https://rawgit.com/MrRio/jsPDF/master/docs/1、安装:npm install jspdf2、引入:import jsPDF from "jspdf"3、使用:let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);第一..原创 2020-07-28 10:54:52 · 55162 阅读 · 11 评论 -
图片转换为base64
本地图片地址转换base64方法typeScript方法const getBase64 = (url: string) => { return new Promise((resolve, reject) => { // 通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,避免了文档冗余和污染 let Img = new Image(); Img.src = url; Img.crossOrigin = 'Anon原创 2020-07-28 10:29:03 · 727 阅读 · 2 评论 -
vue 移动端图片预览的方法使用总结
方法一:import VueImageSwipe from 'vue-image-swipe'import 'vue-image-swipe/dist/vue-image-swipe.css'Vue.use (VueImageSwipe);<div v-for="(item,index) in environmentalList" :key="index+'item'" ...原创 2020-05-28 09:55:29 · 3738 阅读 · 2 评论 -
Unhandled rejection Error: EACCES: permission denied
执行npm i的时候,npm i 突然罢工了。出现类似下面报错原因就是权限不够解决方案如下:sudo chown -R $(whoami) ~/.npm这行代码可以轻松解决这个问题!!!原创 2020-05-28 09:42:29 · 1564 阅读 · 0 评论 -
js更改对象中属性名的方法
数据格式如下:let arr = [ { "id": 275, "name": "测试公司", "userList": [ { "id": 697, "userName": "11111" } ] }, { "id": 327, "name": "有限公司"原创 2020-05-27 15:52:02 · 16161 阅读 · 3 评论 -
Vue使用MathJax动态识别数学公式渲染
1、前言 最近公司的一个项目需求是在前端显示Latex转化的数学公式,经过不断的百度和测试已基本实现。现在此做一个记录。2、MathJax介绍 MathJax是一款运行在浏览器中的开源的数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。(Wiki)3、步骤...原创 2020-03-20 15:30:07 · 4259 阅读 · 6 评论