原生js方法软件工具
常用工具js。以及封装的小工具专栏
搬砖的前端
这个作者很懒,什么都没留下…
展开
-
工具方法:js设置iframe的src为哈希路由(Hash模式)时地址改变页面也不刷新生效处理
## 工具方法:js设置iframe的src为哈希路由(Hash模式)时地址改变页面也不刷新生效处理Hash路由模式替换地址页面也不更新,History模式正常## 处理方案:在 # 前加随机数或时间戳即可## 示例方法:```javascript onReset(item, index, e) { e.stopPropagation(); const getIframe = document.querySelectorAll('.inner-iframe')[inde原创 2024-06-24 17:01:19 · 428 阅读 · 0 评论 -
工具JS:纯前端判断运行环境是公司内网还是公网环境
## 工具JS:纯前端判断运行环境是公司内网还是公网环境### 判断内网方式一般就2种: - 后端出接口,判断请求头内ip地址,是否公司内网的ip即可 - 前端项目内处理,利用iframe、script、img等标签支持跨域(本文介绍) - 如果公司有前端node项目,前端可以自己写一个接口也行(很多公司都没搭建)### 逻辑:1. 内网环境的项目内新建一个js文件(比如:测试开发环境)2. 生产环境调用内网的js文件地址3. 动态创建js标签,调用成功执行onload,调用失败执行原创 2024-06-07 11:40:00 · 339 阅读 · 0 评论 -
vue + particles.js实现粒子动效背景功能流程步骤
vue + particles.js实现粒子动效背景功能流程步骤原创 2023-06-26 18:38:46 · 407 阅读 · 0 评论 -
原生JS:跟随鼠标移动洒落星星的特效
原生JS:跟随鼠标移动洒落星星的特效。参考网络文档,发现计时器一直跑,容易内存溢出,而且长时间网页很卡。优化后: - 弃用 setInterval,采用 setTimeout,防止内存溢出 - 鼠标滑动开启4秒倒计时。自动清理之前的计时器 - 便捷引用,动态创建canvas标签,不需要额外的标签、css等---参考文档:[使用JS实现一个跟随鼠标移动洒落的星星特效:https://www.jb51.net/article/279141.原创 2023-06-26 17:55:20 · 1381 阅读 · 2 评论 -
vscode面板菜单字体太大或者太小解决方式【自留记录】
vscode面板菜单字体太大或者太小解决方式【自留记录】菜单图标 - 设置 - 搜索栏输入 zoom - 输入 0 回车原创 2023-06-25 13:31:09 · 1228 阅读 · 0 评论 -
vscode启动运行 rg.exe占满cpu,电脑很卡处理【自留记录】
vscode启动运行 rg.exe占满cpu,电脑很卡处理【自留记录】关闭搜索的光标追踪【 search.followSymlinks 】设置里面找到了修改的地方,在vscode的首选项设置里面,搜索这个1.找到设置:文件-首选项-设置 或者:左下角设置-设置2.输入框搜索:search.followSymlinks3.关闭绝大多数rg.exe 是由于这个选择项导致,也就是项目里面的依赖包太多,刚启动vscode 响应不过来导致的。...原创 2022-05-19 15:43:17 · 3362 阅读 · 0 评论 -
echarts地图所需世界、中国、各省份的json、js数据
世界、中国、各省份的json、js数据详情下载见:csdn下载链接链接:https://download.csdn.net/download/weixin_44461275/33156388原创 2021-11-11 15:02:01 · 3661 阅读 · 0 评论 -
Echarts世界地图汉化及其数据包
Echarts世界地图是英文的 ,显示汉化常规有两个办法:1.使用汉化后的地图数据 【推荐】2.添加nameMap映射对象1.使用汉化后的地图数据【推荐】汉化包下载地址:mrz8链接:https://pan.baidu.com/s/1E6aF4Hrra20uni7l7cm-lQ 提取码:mrz8英文包下载地址:icub链接:https://pan.baidu.com/s/1MJjxrrETNOrGhw5d9d4z5g 提取码:icub2.添加nameMap映射对象:下载地址:x6se链接原创 2021-11-25 16:50:00 · 2325 阅读 · 4 评论 -
全国省市区及其编码React、Vue、小程序通用
全国省市区及其编码const options = [ { value: 130000, label: '河北省', children: [ { value: 130200, label: '唐山市', children: [ { value: 130202, label: '路南区' }, { value: 130203, label: '路北区' }, {原创 2021-11-01 16:19:51 · 3519 阅读 · 0 评论 -
通用fetch、iframe 原生js下载视频 自定义文件名
通用fetch、iframe 原生js下载视频 自定义文件名转载自:https://blog.csdn.net/yun_master/article/details/114551493。axio 类同,但是需要下载依赖,fetch是windows下自带的,更方便。其他方案一般般,也有用插件的,暂时就这两个实用一些。注意,此方案有跨域风险。下载视频,支持跨域。原创 2023-06-07 16:41:20 · 1174 阅读 · 0 评论 -
JS的防抖与节流
js防抖与节流的区别与相同点:不同点:防抖是在同一时间段执行多次,那么就清楚前面的事件,执行性最后一次;节流是在同一时间段,如果事件没有超过指定的时间间隔那么就不去执行下一次;都是为了防止统一内多次执行事件,消耗浏览器性能。2)在input输入框中执行输入搜索事件;1)按钮的点击提交;...原创 2022-08-31 20:01:21 · 246 阅读 · 0 评论 -
js 获取对象的原型方法、对象prototype
js 获取对象的原型方法、对象prototype在js中获取原型,可以通过以下三种方式:1、p.proto2、p.constructor.prototype3、Object.getPrototypeOf(p) //推荐,规范写法原创 2022-08-31 20:00:37 · 1443 阅读 · 0 评论 -
JS解决contenteditable=“true“的光标位置放到最后
JS解决contenteditable="true"的光标位置放到最后元素设置可编辑后,光标输入时候位置有问题处理。网搜了下能用,记录下。劝大家还是尽量用input这种标签编辑体验好一些,也省了一些问题```javascriptfunction keepLastIndex(obj) { if (window.getSelection) {//ie11 10 9 ff safari obj.focus(); //解决ff不获取焦点无法定位问题 var range原创 2022-08-31 19:59:33 · 1711 阅读 · 0 评论 -
ts引用window自定义变量或值数据类型报错解决方案
window下一些方法或者对象直接使用会报错,一般处理方案如下:1.使用 interface 定义类型2.使用 type 定义类型3.使用 as 强制转换类型为any4.调用时使用 中括号 获取差不多这几种最常用的处理方案,有问题留言...原创 2022-07-09 21:35:44 · 4335 阅读 · 3 评论 -
js获取浏览器系统语言
js获取浏览器系统语言中文:‘zh-CN’如果获取语言数组则使用:根据系统语言默认项目语言类型,现实场景使用不多,国际化项目需要处理。实际项目开发使用,亲测靠谱能用原创 2022-07-03 18:59:05 · 1944 阅读 · 0 评论 -
js判断移动端还是pc端
判断是否是pc端还是移动端,网络方案:方案一:方案二:方案三:方案四:拓展:智能机浏览器版本信息:是否是ipad:判断浏览器是否为IE8以下是否为IE参考链接:https://www.cnblogs.com/T8888/p/14603164.html...原创 2022-06-27 11:56:49 · 12063 阅读 · 0 评论 -
获取地址url中的query参数指定参数方法
获取地址url中的query参数指定参数方法方案二:有兼容性(支持es6 的map就可以)方案三:有兼容性(支持es6就可以)基本上主流浏览器都没问题,一般我用万能的第一种,但是有些长原创 2022-06-21 21:59:05 · 1553 阅读 · 0 评论 -
JS计算字符串所占字节数占用储存大小
编码说明js使用Unicode编码,最多时候是:UTF-8 和 UTF-16两种。(1)UTF-8 是一种针对Unicode的可变长度字符编码,可以表示Unicode标准中的任何字符,且其编码中的第一个字节仍与ASCII相容,使用一至四个字节为每个字符编码。字符代码在:000000 – 00007F之间的,用一个字节编码;000080 – 0007FF之间的字符用两个字节;000800 – 00D7FF 和 00E000 – 00FFFF之间的用三个字节,注: Unicode在范围 D800-原创 2022-02-26 16:45:01 · 4966 阅读 · 0 评论 -
通用原生js创建a标签下载图片 自定义文件名
下载图片,支持跨域。压缩图片,最后通过a标签下载 图片。imgsrc:图片地址name:自定义下载文件名字const downLoadImg = (imgsrc, name) => { var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { console.log(原创 2022-02-21 19:54:28 · 1829 阅读 · 1 评论 -
通用创建a标签打开下载文件或blob对象 自定义文件名
url: 下载地址,或者blob对象,必选saveName: 保存文件名,可选const openDownloadDialog = (url, saveName) => { if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.hr.原创 2022-02-21 19:41:32 · 1516 阅读 · 0 评论 -
js图片img转base64数据流并压缩处理
js转化本地或者线上图片,转base64数据流并压缩处理。es5-回调处理:// 参数说明:图片地址(本地或者线上url)、处理后返回的base64内容、指定图片类型function imgToBase64(url, callback, outputFormat) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image; img.crossOr原创 2021-12-15 01:29:23 · 4889 阅读 · 0 评论 -
ios微信公众号或浏览器滚动露底漏网址闪动无法固定
微信公众号H5页面或者其他浏览器,在ios一些机型上,上下左右滑动,可以漏出底部的域名,黑块(或者白块)。搜索很多网上文档,大都是那几种,但是不顶用测试环境: ios14.6、微信内置浏览器、或其他浏览器原理: 修改document的滚动事件,监听滚动赋值元素的scrollTop值修改如下:<!-- 原生标签和vue、uniapp等可用,react项目基本上不需要,没碰到露底异常 --><template> <view id='scrollBox'>原创 2021-12-14 10:50:03 · 5563 阅读 · 0 评论 -
js校验用户身份证省市区年龄性别
一般正则校验不够严谨,只能比较泛泛,有的只校验长度常规正则:/^(\d){17}([0-9xX])$/.test(code)// code 身份证号码本校验可以校验:格式、省市区、年龄、年月日、平闰年算法、末位校验废话不多说,看代码:const WI = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];const VI = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];const AI = [];原创 2021-12-09 18:21:13 · 3470 阅读 · 0 评论 -
js监听判断设备是否有网络(断网恢复事件监听)
判断是否有网:navigator.onLine:false断网,true有网监听用户是否开关网络:window.addEventListener("online", function () { console.log("网络连接已恢复!");}); window.addEventListener("offline", function () { console.log("网络连接已断开!");});...原创 2021-12-06 17:51:07 · 4605 阅读 · 1 评论 -
js处理图片变形、方向、压缩等
图片各类处理//检查图片是否有被压扁,如果有,返回比率//http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-iosfunction detectVerticalSquash(img) { // 拍照在IOS7或以下的机型会出现照片被压扁的bug var data; var ih = img.naturalHeight; var canvas = document.createElem原创 2021-11-01 16:14:41 · 4183 阅读 · 3 评论 -
javascript 对象转成&拼接参数
javascript 对象转成&拼接参数 function addQueryString(params) { var str = ''; for (var Key in params) { str += Key + '=' + params[Key] + '&'; } return '?' + str; //return '?' + str.substr(0, str.length -1); 严谨一些 } 调用和说明: let obj = {原创 2021-10-15 16:43:22 · 1864 阅读 · 0 评论 -
获取电脑系统版本类型
获取电脑系统版本类型判断pc系统版本的工具,常用在用户画像的数据统计等兼容ie7、ie8 function getSystem() { var sUserAgent = navigator.userAgent; var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); var isMac = (navigator.platform == "Mac68K") || (navigator.原创 2021-10-15 16:04:51 · 184 阅读 · 0 评论 -
react、vue、jq页面滚动到指定元素-锚点
react、vue、jq滚动页面到指定元素-锚点相对普通a标签的锚点跳转,没缓动效果,太生硬推荐使用scrollIntoView()方法最常见使用方式: const scrollToEle = (ele) => { let getEle = document.getElementById(ele); if (!getEle) return; //建议判断元素是否存在 getEle.scrollIntoView({ behavior: 'smooth' }); };原创 2021-10-15 10:48:00 · 3619 阅读 · 1 评论