react
文章平均质量分 64
司徒小北
这个作者很懒,什么都没留下…
展开
-
JS 生成唯一UUID的几种方法
在开发中偶尔会遇到需要生成唯一id的时候,比如对数组的任意一项进行多次增删改,这时就需要给每一项添加唯一标识符来加以区分。以下总结了几种生成唯一标识的方法,仅供参考。原创 2023-02-11 11:12:12 · 1489 阅读 · 0 评论 -
indexedDB存储
随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。原创 2023-02-02 15:28:18 · 915 阅读 · 0 评论 -
一个关于image访问图片跨域的问题
通过 'img' 加载的图片,浏览器默认情况下会将其缓存起来。当我们从 JS 的代码中创建的 'img' 再去访问同一个图片时,浏览器就不会再发起新的请求,而是直接访问缓存的图片。但是由于 JS 中的 'img' 设置了 crossorigin,也就意味着它将要以 CORS 的方式请求,但缓存中的图片显然不是的,所以浏览器直接就拒绝了。连网络请求都没有发起。原创 2023-01-16 17:34:52 · 7332 阅读 · 1 评论 -
JS 点击某元素以外的地方触发事件
本来就只是使用e.target就行了,但是点击事件的target的机制问题,单纯地使用e.target并不能根本解决这个问题,因为目标区域内可能有很多的元素,这个点击事件会选择其内部的元素,就举当前的html代码为例子,现在我的目标区域demo内有一个p标签,如果我点到这个p标签,e.target会指向这个p标签,而不会去指向这个demo元素。点击颜色画板之外的区域,隐藏颜色画板。这个功能多用于关闭自己设置的弹窗,设置好最外层的判断元素,点击弹窗之外,弹窗就会关闭,这个在用户体验方面是非常有利的一个功能。原创 2023-01-16 17:23:53 · 2038 阅读 · 1 评论 -
JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题
当我们在加载一个线上mp3地址或者获取audio的duration的时候,会发现有拿到duration是Infinity的情况,这时如果我们动态的展示录音时间时候就会有问题。首先明确一下这是chrome浏览器自己的存在的一个bug,因为我们拿到的录音数据流没有定义长度,所以浏览器无法解析出当前音频的时长。原创 2022-12-08 22:14:04 · 5641 阅读 · 1 评论 -
React使用西瓜播放器
西瓜播放器是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力,让本不支持流式播放的 mp4 能做到分段加载,这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时,它也集成了对 flv、hls、dash 的点播和直播支持。if (!cid ||!原创 2022-09-14 17:52:31 · 1660 阅读 · 0 评论 -
Echarts 折线图超出上下限部分变色 结合visualMap处理
第一:查看series中是否设置了线条的颜色,比如lineStyle的color,设置了之后就会以这个为准,visualMap里面的颜色就不会生效了。我会经常分享自己所学所看的干货,在进阶的路上,共勉!注意点:在series 里面不能设置线的颜色,要不然会以series里面设置的颜色为准,设置的范围变色将不起作用。第二:如果上面方法还不行,试试按需引入visualMap的js文件。前言:介绍单个折线图的处理方法和多个折线图不同颜色的处理方法。一:单折线图代码逻辑。二:多折线图代码逻辑。...........原创 2022-09-01 11:32:30 · 4628 阅读 · 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 · 4313 阅读 · 0 评论 -
input修改自动填充背景色
input 修改自动填充背景色原创 2022-06-28 16:40:28 · 1685 阅读 · 0 评论 -
JS检测客户端是否安装
JS检测客户端是否安装原创 2022-06-02 18:00:12 · 1270 阅读 · 2 评论 -
数字金额和汉字金额大写转换方法
前端:方法一(简单粗暴):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 · 687 阅读 · 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 · 1075 阅读 · 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 · 3492 阅读 · 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 · 72708 阅读 · 2 评论 -
js删除对象/数组中null、undefined、空对象及空数组方法示例
如下,对于一个多层嵌套的数据结构:例如要做的就是删除所有value为空,数组为空,对象为空的字段const querys = { name: '测试', httpMethod: '', httpHeaders: [ { key: 'Accept', value: 'test', }, ], restParams: [ { key: '', value: '', }, ], body: {原创 2022-04-27 13:45:40 · 18771 阅读 · 1 评论 -
点击其他区域,隐藏弹窗或各种元素的原理
点击其他区域,隐藏弹窗或各种元素的原理原创 2022-04-26 14:30:51 · 1918 阅读 · 0 评论 -
Loading chunk {n} failed 的解决方法
背景:前端代码更改后,每次发布到测试环境,用户的页面如果不刷新,会读取缓存,导致页面白掉! 本地没有过,都是打包到服务器上才有error infoUncaught SyntaxError: Unexpected token '<'Uncaught ChunkLoadError: Loading chunk 8 failed.(missing: https://mispaceuat.mihoyo.com/static/js/8.98f2a71fc60af3a81dd1.js)原创 2022-04-19 14:10:10 · 9985 阅读 · 0 评论 -
html页面添加水印,纯js设置
原理:根据页面大小,动态添加若干个div元素,将传递过来的文字写到div里,设置div旋转的角度、位置、宽度、高度、间距、字体、字体颜色等等调用的逻辑:index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1原创 2022-03-02 11:10:15 · 2118 阅读 · 2 评论 -
react 搜索实现高亮
为了增加用户体验,都会提供一个快速搜索的功能,以便用户快速定位,但是如果进行模糊匹配的话,希望输入的关键字在搜出来的数据里面进行高亮展示,提高用户体验技术点1. font 标签// 利用font标签可以规定文本字体、大小和颜色<font color="red" size="5" face="arial" >测试</font>2. dangerouslySetInnerHTML (直接在React中设置 HTML)react 官网文档提供方法,是 Re原创 2022-01-20 16:43:08 · 2054 阅读 · 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 · 1158 阅读 · 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 · 9588 阅读 · 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 · 972 阅读 · 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 · 2760 阅读 · 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 · 6968 阅读 · 2 评论 -
canvas生成自定义大小图片
场景:比如移动端签名,一张canvas画布,在任意位置书写之后,生成一张图片,如果这种图片要放到某一个签名的位置会显的特别大,我们来解决这个问题一、生成canvas图片通过 canvas.toDataURL('image/png', 1) 生成一张base64的canvas图片,也可以是你自己的其他图片二、将原图转换为自定义大小的图片/** * resize 生成自定义大小的图片 * @param {String} datas 图片原文件 * @param {Num.原创 2021-04-20 11:22:58 · 4861 阅读 · 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 · 1933 阅读 · 0 评论 -
区分浏览器关闭和刷新
其实本身浏览器关闭和刷新没有区别的太开,下面介绍两种场景,逻辑一是关闭页面时需要区分出是刷新还是关闭,逻辑二是进入页面时需要区分刷新还是重新进入页面,下面结合实例看一下先介绍几个会用到的事件onload:页面载入时触发 onbeforeunload: 在即将离开页面(刷新或关闭)时触发 onunload: 退出页面时触发,已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用页面加载时只执行onload页面关闭时先执行onbeforeunload,最后onun...原创 2021-02-04 18:50:20 · 3087 阅读 · 1 评论 -
注册快捷键(单快捷键、组合快捷键)
一、注册快捷键方法window.addEventListener('keydown', onWindowKeyDown, false);window.addEventListener('keyup', onWindowKeyUp, false);注意:addEventListener在组建销毁的时候也需要销毁eg:react+hooks useEffect(() => { window.addEventListener('keydown', onWindowKeyDow原创 2020-12-04 14:27:02 · 1339 阅读 · 1 评论 -
git项目中加入版本号git-revision-webpack-plugin
webpack 插件生成VERSION和COMMITHASH基于本地生成过程中的文件的Git仓库。便于我们在项目中可直观看到提交的gitcommithash用法:给定一个webpack 4项目,将其安装为本地开发依赖项:npm install --save-dev git-revision-webpack-plugin然后,将其配置为webpack配置中的插件:const GitRevisionPlugin = require('git-revision-webpack...原创 2020-10-20 14:23:52 · 4851 阅读 · 0 评论 -
使用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 · 7236 阅读 · 0 评论 -
JavaScript 优化判断条件
一、前奏:我们一般在遇到复杂逻辑判断时,第一时间想到的处理方案是用if/else/switch等来实现多个条件判断逻辑处理,但是随着判断条件的增多,代码中的判断条件会越来越来越臃肿,越来越不可读不可维护,下面探讨如何更优雅的写判断逻辑。1、if/else方式: 如键盘按键 const publicKeyboardShortcuts = (evt: KeyboardEvent) => { if(evt.keyCode == 1){ onKeyDownActive('o原创 2020-08-06 13:26:26 · 1602 阅读 · 2 评论 -
React + MobX 快速上手
一、Mobx机制介绍:Mobx 是简单、可扩展的状态管理,当应用状态更新时,任何源自应用状态的东西都将自动地获得。React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而 MobX 提供机制来存储和更新应用状态供 React 使用。Mobx 中文文档Mobx 英文文档Mobx 的运行机制如下图:首先从左往右看,事件触发了 Actions,Actions 作为唯一修改 State 的方式,修改了 State,State 的修改更.原创 2020-08-05 16:20:51 · 2991 阅读 · 0 评论 -
React Hooks 用法详解
React 中提供的 hooks: useState:setState useReducer:setState,同时 useState 也是该方法的封装 useRef: ref useImperativeHandle: 给 ref 分配特定的属性 useContext: context,需配合 createContext 使用 useMemo: 可以对 setState 的优化 useCallback: useMemo 的变形,对函数进行优化原创 2020-08-03 18:27:39 · 4659 阅读 · 0 评论 -
React Hooks 的介绍
一、Hooks介绍React 一直都提倡使用函数组件,但是有时候需要使用 state 或者其他一些功能时,只能使用类组件,因为函数组件没有实例,没有生命周期函数,只有类组件才有 Hooks 是 React 16.8 新增的特性,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 凡是 use 开头的 React A原创 2020-08-03 18:28:36 · 447 阅读 · 0 评论