自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(104)
  • 收藏
  • 关注

原创 JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题

当我们在加载一个线上mp3地址或者获取audio的duration的时候,会发现有拿到duration是Infinity的情况,这时如果我们动态的展示录音时间时候就会有问题。首先明确一下这是chrome浏览器自己的存在的一个bug,因为我们拿到的录音数据流没有定义长度,所以浏览器无法解析出当前音频的时长。

2022-12-08 22:14:04 170

原创 React使用西瓜播放器

西瓜播放器是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力,让本不支持流式播放的 mp4 能做到分段加载,这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时,它也集成了对 flv、hls、dash 的点播和直播支持。if (!cid ||!

2022-09-14 17:52:31 308

原创 Echarts 折线图超出上下限部分变色 结合visualMap处理

第一:查看series中是否设置了线条的颜色,比如lineStyle的color,设置了之后就会以这个为准,visualMap里面的颜色就不会生效了。我会经常分享自己所学所看的干货,在进阶的路上,共勉!注意点:在series 里面不能设置线的颜色,要不然会以series里面设置的颜色为准,设置的范围变色将不起作用。第二:如果上面方法还不行,试试按需引入visualMap的js文件。前言:介绍单个折线图的处理方法和多个折线图不同颜色的处理方法。一:单折线图代码逻辑。二:多折线图代码逻辑。...........

2022-09-01 11:32:30 779

原创 nginx部署多个前端项目

nginx部署多个前端项目

2022-07-28 13:58:28 1411

原创 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 891

原创 input修改自动填充背景色

input 修改自动填充背景色

2022-06-28 16:40:28 408

原创 JS检测客户端是否安装

JS检测客户端是否安装

2022-06-02 18:00:12 398 1

原创 用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 3440 6

原创 数字金额和汉字金额大写转换方法

前端:方法一(简单粗暴):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 271

原创 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 448 1

原创 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 1528

原创 【视频测试地址】各类视频(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 35125 2

原创 js删除对象/数组中null、undefined、空对象及空数组方法示例

如下,对于一个多层嵌套的数据结构:例如要做的就是删除所有value为空,数组为空,对象为空的字段const querys = { name: '测试', httpMethod: '', httpHeaders: [ { key: 'Accept', value: 'test', }, ], restParams: [ { key: '', value: '', }, ], body: {

2022-04-27 13:45:40 7951 1

原创 点击其他区域,隐藏弹窗或各种元素的原理

点击其他区域,隐藏弹窗或各种元素的原理

2022-04-26 14:30:51 1360

原创 JS快速生成数组序列

eg: 生成0-10 / 1-10个有序序列数组混合使用传统方法、ES5、ES6来优雅实现生成 1-10 的序列 :/** * 生成 1-10 有序序列数组 * [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] */1、new Array(10).fill(1).map((v, i) => ++i); 2、[...Array(11).keys()].slice(1);3、Array.apply(null,{length:10}).map((vi.

2022-04-22 13:52:25 1441

原创 时间点及网络状态 组件打点

效果如下:可根据自己的需求去调整,主要说一下实现思路和方法。以下实现基于react语法去写的,vue或js逻辑类似,参考即可主要思路:部分代码如下1、良好、一般、糟糕 时间线的实现思路:良好(现在看到的)lfDot,rgDot左右各一个点,鼠标滑过展示具体时间点信息<div className="goodLine" style={{ left: actStartNode.left, width: actStartNode.width }}> <Too

2022-04-21 17:47:25 241

原创 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 2075

原创 静态资源CDN挂掉了(处理办法)

都知道使用静态的BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务引入jQuery等一些js包的时候,会提升网页的性能。那么,如果你引入CDN的地址挂掉了,那么项目同样也会挂掉,所以我们需要在引入的时候可以添加一个判断。如下:<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script>window.jQu..

2022-03-07 11:07:22 2222 2

原创 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 1130 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 1463

原创 正则删除字符串左、右或两端的空格经验总结

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 623

原创 Gitkraken stuck at opening repo

Close gitkraken and go to your home directory. Delete the hidden folder ".gitkraken". The folder ".gitkraken" will be created automatically upon restart. This solution works for me.For mac and linux users:rm -r ~/.gitkraken

2021-12-28 17:46:51 90

原创 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 435

原创 按需处理改造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 703

原创 密码校验常用正则表达式

至少八个字符,至少一个字母和一个数字:"^(?=.*[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 3344

原创 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 437

原创 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 1026

原创 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 4608 2

原创 canvas生成自定义大小图片

场景:比如移动端签名,一张canvas画布,在任意位置书写之后,生成一张图片,如果这种图片要放到某一个签名的位置会显的特别大,我们来解决这个问题一、生成canvas图片通过 canvas.toDataURL('image/png', 1) 生成一张base64的canvas图片,也可以是你自己的其他图片二、将原图转换为自定义大小的图片/** * resize 生成自定义大小的图片 * @param {String} datas 图片原文件 * @param {Num.

2021-04-20 11:22:58 2261

原创 改变canvas生成的图片中文本颜色

一、将canvas画布生成图片获取canvas,通过canvas.toDataURL('image/png', 1)直接可以将画布转换成base64图片二、canvas书写的时候是一个颜色,书写完生成图片的时候,图片中的文本字体变成另一个颜色,如何处理?可以通过设置canvas.getContext('2d').globalCompositeOperation的值来实现具体方法如下:书写中画布的文本颜色设置:this.canvas = canvas;this.context.

2021-04-19 18:14:03 1640

原创 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 1393

原创 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 821

原创 区分浏览器关闭和刷新

其实本身浏览器关闭和刷新没有区别的太开,下面介绍两种场景,逻辑一是关闭页面时需要区分出是刷新还是关闭,逻辑二是进入页面时需要区分刷新还是重新进入页面,下面结合实例看一下先介绍几个会用到的事件onload:页面载入时触发 onbeforeunload: 在即将离开页面(刷新或关闭)时触发 onunload: 退出页面时触发,已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用页面加载时只执行onload页面关闭时先执行onbeforeunload,最后onun...

2021-02-04 18:50:20 1464 1

原创 Sequelize操作MySQL基本用法

Sequelize.js是一款针对nodejs的ORM框架。使用nodejs连接过数据库的人肯定对数据库不陌生了。如果是直接链接,需要自己建立并管理连接,还需要手动编写sql语句。简单的项目到是无所谓,可是一旦项目设计的东西比较复杂,表比较多的时候整个sql的编写就非常的消耗精力。在nodejs中我推荐Sequelize。它是一个很成熟的框架,在速度和性能上也非常有优势。而其中最关键的地方就在于,日常开发只需要管理对象的创建、查询方法的调用等即可,极少需要编写sql语句。这一个好处就是省去了复杂的s

2021-01-27 18:41:35 1232

原创 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 5217 2

原创 注册快捷键(单快捷键、组合快捷键)

一、注册快捷键方法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 740 1

原创 yapi工程部署及使用方法

可以去网易云课堂看一下yapi相关课程想要学习yapi工程部署,对yapi的初学者以及想了解yapi的具体使用方法的同学都可以学习该课程会从头开始讲解yapi的部署方法,部署一套yapi工程,超级管理员模式下创建分组、创建接口以及达到正常调用接口的程度网易云课堂搜索:yapi就可以看到 “yapi工程部署及使用方法” 课程或者通过扫码可直接查看: ...

2020-10-28 13:53:05 846

原创 yapi的使用方法

可以去网易云课堂看一下yapi相关课程可以去网易云课堂看一下yapi相关课程可以去网易云课堂看一下yapi相关课程1.登录网站,登录或注册:http://yapi.demo.qunar.com/(这yapi自己的服务,如果要用自己服务器的服务,需要自己搭建一套yapi工程,网易云课堂有相关课程)2.登录成功后,可以创建对应项目注:1.项...

2020-10-28 13:52:16 60275 28

原创 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 3525

原创 使用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 4200

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除