- 博客(58)
- 收藏
- 关注
RSS订阅原创 前端金额运算精度丢失问题及解决方法
前端开发中难免会遇到价格和金额计算的需求，这类需求所要计算的数值大多数情况下是要求精确到小数点后的多少位。但是因为JS语言本身的缺陷，在处理浮点数的运算时会出现一些奇怪的问题，导致计算不精确。本文尝试从现象入手，分析造成这一问题原因，并总结和整合一些通用的解决方案，以供大家参考。
2024-05-16 15:27:17
800
原创 vue使用实现录音功能js-audio-recorder
vue使用实现录音功能js-audio-recorder最近项目中需要实现一个录音上传功能，用于语音评论可以上录音。完整代码
2023-12-01 15:56:47
1285
原创 vue 项目在编译时，总是出现系统崩的状态，报错信息中有v7 或者 v8 的样式-项目太大内存溢出
vue 项目在编译时，总是出现系统崩的状态，node 命令框也会报错，报错信息中有v7 或者 v8 的样式。
2023-08-22 16:38:53
388
原创 javascript常用代码片段及函数,验证及判断的方法
29.el是否包含某个class。10.是否undefined。17.是否Promise对象。30.el添加某个class。31.el去除某个class。16.是否Symbol函数。34.el是否在视口范围内。28.根据url地址下载。7.是否boolean。19.是否是微信浏览器。21.是否是QQ浏览器。25.去除html标签。18.是否Set对象。26.获取url参数。32.获取滚动的坐标。
2022-12-30 15:22:29
815
1
原创 vue内嵌iframe跨域通信
1、Vue组件中如何引入iframe？2、vue如何获取iframe对象以及iframe内的window对象？3、vue如何向iframe内传送信息？4、iframe内如何向外部vue发送信息？
2022-12-01 15:50:12
6268
3
原创 mp4，m3u8，rtsp，rtmp，flv，直播流在线测试地址
西瓜播放器测试视频: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv。前端做直播视频展示的时候，很多时候播放不出来，不是因为自己代码的问题，而是因为网上很多源。现在已经播放不出来了，所以源头都有问题，那自己的前端肯定就放不出来。以上是我测试目前可以用的，如果大家有补充可以告诉我，互帮互助！下面放我当前测试可以用的几个在线视频流。
2022-11-29 09:54:17
5972
2
原创 JS检测客户端软件是否安装
通过浏览器打开某个客户端，需要检测看客户端是否已经安装过了，未安装则提示安装该客户端，已安装则直接打开打开客户端的方法通过客户端软件在注册表注册的自定义协议打开。例如js代码location.href='baseonline//';查看注册表方法在键盘上按“win+R”,打开运行窗口,在里面输入regedit,回车即可进入注册表编辑器实现方案1首先github上找到这个方案https对多个浏览器都实现了，基本都是hack方法。...
2022-07-21 15:30:47
2792
原创 element上传照片（el-upload 超简单）
经常会有人问我上传照片怎么做，这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload，我们慢慢看，先看结构代码，之中有注释：
2022-07-04 15:43:30
17809
原创 网页鼠标点击特效案例收集(直播间红心同理)
2. 鼠标点击出随机设置的文字 3. 鼠标点击出现烟花波纹 4. 鼠标移动出现星星拖尾 5. 鼠标粒子拖尾 6. 鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果 7. 樱花飘落背景特效 8. 蜘蛛网背景特效......
2022-06-22 10:39:51
47307
2
原创 自定义指令 v-clickoutside 使用方法
引入指令import Clickoutside from 'element-ui/src/utils/clickoutside'声明指令export default { directives: { Clickoutside }, data: function() { return { } }}使用指令<div v-clickoutside="handleClickOutside"></div>methods: {
2022-04-14 08:55:22
5455
2
原创 web调起客户端
直接上效果上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
2022-04-11 16:07:03
488
原创 vue项目使用阿里云播放器（aliyun）
1、在项目的components的文件夹下新建AliPlayer.vue文件，将sdk插件的代码放入其中，代码如下：<template> <div class="prism-player" :id="playerId" :style="playStyle"></div></template><script> export default { name: "Aliplayer", props: { ...
2022-04-11 13:56:09
8117
10
原创 vsCode配置自动补全CSS兼容性代码，Autoprefixer 3.0无效解决方案
问题：1. vsCode 配置自动补全CSS兼容性代码，Autoprefixer 3.0 及以上版本无效。2. 特意测试了3.0以上版本，包含3.0，在配置的时候代码颜色就提示了，配置无效是不会出现Autoprefixer CSS命令的。解决方案：将 Autoprefixer 3.0.1版本降成3以下的版本（Autoprefixer 2.2.0）。解决步骤：1. 先降低Autoprefixer插件的版本。在npm安装全局 npm i -g autoprefixer..
2022-02-21 17:43:30
3123
原创 vue中实现水波图（echarts-liquidfill，echarts）
echarts-liquidfill查看官方文档安装npm install echarts --savenpm install echarts-liquidfill --savevue main.js 中注册import echarts from 'echarts' //引入echartsimport 'echarts-liquidfill'组件中使用<template> <div style="width: 400px; height...
2022-02-11 16:28:59
3277
1
原创 前端高效开发必备的 js 库
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结.首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.前端由于入行门槛低, 更新换代很快, 每年都会有大量新的框架和库出现, 也有大量库被淘汰(比如JQuery, 但是学习它的设计思想很有必要). 所以我们大可不必担心, 保持自己的学习步伐,.
2022-01-24 15:37:45
187
原创 axios终止网络请求
1.axios中止单个网络请求 const CancelToken = axios.CancelToken config.cancelToken = new CancelToken((cancel) => { // 存储并使用cancel })axios中止所有的网络请求使用CancelToken 在axios的请求拦截中，使用store存储每个请求的cancelToken实例 拦截路由，调用cancelToken()方法终止请求原生j
2022-01-24 14:29:26
5412
原创 使用countup.js让数字动起来
直接使用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>数字动起来
2022-01-19 15:32:17
411
原创 前端人脸识别解决方案
最近业务功能需求开发中Web端需要接入人脸识别，于是做了技术预演1.第三方解决方案现有的云服务商解决方案：市场还有很多类似的解决方案，这里不一一列举，下面是某云服务商的报价Web API中有个MediaDevices.getUserMedia()的方法，调用后会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道。 旷世 - 人脸识别 face++[1] 腾讯云神图.
2022-01-17 10:11:13
6731
原创 Module build failed: TypeError: this.getOptions is not a function at Object.loader
这个异常说明了当前style-loader的版本过高导致webpack的编译错误，需要降低版本解决方法：降低当前style-loader版本npm install style-loader@<version> --save-dev如下：npm install style-loader@1.0.0 --save-dev...
2022-01-13 14:21:47
3279
原创 vue项目启动时 chatroom@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.c...
关于npm ERR! chatroom@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`原因：这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好。解决：（1）npm uninstall webpack-dev-server（2）npm install webpack-dev-server@2.9.1（3）npm run dev..
2022-01-13 14:05:39
574
原创 Error: EINVAL: invalid argument, mkdir ‘D:\webde\chatroom-pcapp\“D:\installatio
错误原因:在node.js的安装目录下创建两个文件夹，node_cache和node_global，然后命令行设置：npm config set cache "D:\nodejs\node_cache"npm config set prefix "D:\nodejs\node_global"设置缓存文件夹和设置全局模块存放路径。结果就是输入与npm任何有关的命令时，都会报错：只要出现这个报错，无论如何重新安装nodejs都会重复出现这个错误。解决方法：从错误根.
2022-01-13 13:23:52
463
1
原创 原生js-Ajax封装
Ajax 说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有：（地图）实时更新，表单验证等等.... ajax的优缺点： 优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力 缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制） 2.一个Ajax请求多了，也会出现页面加载慢的情况。 ...
2022-01-12 16:40:07
1368
原创 vscode+eslint 的配置规则和自动修复
全局安装eslint 打开终端，运行npm install eslint -g全局安装ESLint。 vscode安装插件 vscode 扩展设置 依次点击文件 > 首选项 > 设置{ "workbench.iconTheme": "material-icon-theme", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": fal...
2022-01-12 13:49:28
636
原创 git如何退回到某个版本
git log 查看提交历史commit后面那一长串就是版本号，然后gitreset--hard 版本号即可退回到某次提交的版本
2022-01-11 15:15:15
301
原创 Vue中监听键盘事件及自定义键盘事件
在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。方案：在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。<input @keyup.enter="function">另外，Vu..
2022-01-11 15:05:59
5222
原创 vue 登录页记住密码保留7天。
<FormItem > <Checkbox v-model="isRemember" > <span>记住密码</span> </Checkbox></FormItem>data里默认false// 设置cookie setCookie(username, password, exdays) { var exdate =.
2022-01-05 10:01:30
325
原创 axios 的封装
axios 的封装的封装都是大同小异，按需更改即可。// 封装请求import axios from 'axios'import { ElMessage } from 'element-plus'// 请求const http = axios.create({ baseURL: "https://www.liulongbin.top:8888/api/private/v1", timeout: 6000})// 请求拦截http.interceptors.request.
2022-01-05 09:54:20
12260
2
原创 HTML CSS实现翻页效果（动画）
有详情注释说明<html><style> * { padding: 0; margin: 0; } body, html { height: 100%; } body { /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小， 大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通..
2022-01-05 09:34:29
5366
1
原创 最新CSS 水平垂直居中方式汇总
垂直居中主要分为了两种类型：居中元素宽高已知和居中元素宽高未知，那么我们就结合这两种类型来一一举例。目录居中元素宽高已知1、absolute +marginauto2、absolute + 负 margin3、absolute + calc居中元素宽高未知1、absolute + transform3、table 表格元素（不推荐）4、css-table（display:table-cell）5、flex布局（推荐）居中元素宽高已知1、abs...
2022-01-05 09:12:28
88
原创 H5调用摄像头拍照并下载照片
类似需求基本粘贴复制就能用调用摄像头拍照转成base64格式后下载图片，这个没什么花里胡哨的骚操作，直接看代码 （canvas + video）<html ><style> body{ text-align: center; } button{ width: 100px; height: 40px; background-color: #d35555; border-radius: 5px; border:non
2022-01-04 10:55:01
1515
4
原创 响应式网站-媒体查询
1、什么是响应式网站响应式是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面计算机显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现 。2、响应式网站的核心逻辑优雅降级，内容优先。响应式：一个网站去兼容多个终端，而不是为每个终端做特定版本。优点：面对不同分辨率，设备灵活性比较高；快捷解决很多设备的适应问题适合中小型网站 缺点：因为要兼容各种设备，工作量很大，效率不高代码冗余，会出现很多隐藏无用的元素，加载时间长 原理：通过css3新增的媒
2021-12-31 14:16:11
755
原创 Vue调试vue-devtools安装
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。chrome商店直接安装vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。手动安装第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtoolsgit clone https://github.com/v
2021-12-30 16:01:33
250
2
原创 15个 Vue 技巧使用的总结经验
1、将一个 prop 限制在一个类型的列表中我们在使用 prop 时，可能会有时候需要判断该 prop 是否在我们规定的范围内（或者说规定的值内），此时可以使用 prop 定义中的 validator 选项，将一个 prop 类型限制在一组特定的值中。export default { name: 'Test', props: { name: { type: String, }, size: { type: String, valid...
2021-12-30 13:52:52
377
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人