![](https://img-blog.csdnimg.cn/20200504214633617.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端原生:JavaScript
原生JS是每位大钱端的开发人员必备的底层技术
美酒没故事°
苟有恒,何必三更眠五更起;最无益,莫过一日曝十日寒
展开
-
原生js手撸乞丐版 vs code
原生 showDirectoryPicker() + FileReader() 技术实现原创 2024-02-18 14:02:28 · 848 阅读 · 2 评论 -
js原生超好用的数组分类方法Object.groupBy()
还自己手写联级方法吗?Object.groupBy() 就能搞定,用于菜单栏的数据很使用原创 2024-01-08 17:06:43 · 558 阅读 · 0 评论 -
js原生深拷贝方法:structuredClone() 告别自写时代
自2022年3月起,该功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中工作。原创 2023-12-25 10:52:52 · 822 阅读 · 1 评论 -
js Intl.DateTimeFormat() 格式化时间利器
简单举例Intl.DateTimeFormat怎么使用原创 2023-12-14 15:46:20 · 916 阅读 · 0 评论 -
实现环形进度圈
/x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针。原创 2023-12-05 09:34:12 · 469 阅读 · 0 评论 -
前端js语音朗读文本
SpeechSynthesisUtterance 的使用原创 2023-11-22 16:59:16 · 691 阅读 · 0 评论 -
巧妙使用js IntersectionObserver实现dom懒加载
原生js实现懒加载原创 2023-08-16 16:42:44 · 237 阅读 · 1 评论 -
js IntersectionObserver简单案例
介绍IntersectionObserver的基本使用原创 2023-08-16 16:24:55 · 254 阅读 · 0 评论 -
js数组 数据量大进行切片重组
比如10个为一段原创 2023-08-11 13:26:31 · 217 阅读 · 0 评论 -
使用go()和back()两种返回上一页的区别
go(-1): 返回上一页,原页面表单中的内容会丢失;history.go(-1):后退+刷新;history.go(1) :前进back(): 返回上一页,原页表表单中的内容会保留;history.back():后退 ;history.back(0) 刷新;history.back(1):前进...原创 2019-06-06 15:53:06 · 46394 阅读 · 2 评论 -
vue判断首次加载和刷新
mounted() { // console.log(performance); switch (performance.navigation.type) { case 0: console.log("首次加载出来了"); break; case 1: console.log("页面刷新完了"); break; }},原创 2021-04-06 14:52:39 · 1186 阅读 · 0 评论 -
前端大存储大量的数据,indexedDB浏览器端的数据的使用
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。. 该 API 使用索引实现对数据的高性能搜索。. 虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。原创 2022-11-17 16:09:18 · 478 阅读 · 0 评论 -
前端浏览器自带数据库增删改查操作:indexdDB的基础使用
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。原创 2022-10-28 17:57:13 · 1580 阅读 · 1 评论 -
js 封印对象,使其不能拓展属性:Object.preventExtensions()
方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。如果只是不允许添加属性,原创 2022-10-26 14:59:42 · 258 阅读 · 0 评论 -
js 封印对象:使其只能修改已有属性不能增删:Object.seal()
如果只是希望一个对象原有的属性值可以修改,但是不能添加或者删除属性,原创 2022-10-26 14:55:51 · 173 阅读 · 0 评论 -
js 禁止修改变量:冻结对象或数组 Object.freeze()
【代码】js 禁止修改变量:冻结已有数组的值。原创 2022-10-26 14:46:49 · 411 阅读 · 0 评论 -
js 禁止修改变量:冻结已有对象的属性:Object.defineProperty()
`Object.defineProperty()`的使用/ value: 2 // 定义该属性的值。// 是否出现在对象的枚举属性中。// 是否可以被删除。// 是否可以被修改。原创 2022-10-26 14:41:00 · 476 阅读 · 0 评论 -
web调用系统通知 Notification的使用
new Notification("同意了,通知一个");原创 2022-04-08 14:44:28 · 585 阅读 · 0 评论 -
web Worker前端多线程任务执行
new Worker()原创 2022-04-08 14:25:21 · 1178 阅读 · 0 评论 -
js 获取汉字拼音的首字母
<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head>.原创 2021-11-04 10:54:48 · 3330 阅读 · 0 评论 -
js 原生最简单简洁的打印
67、我是一个很有原则的人,说到底我做人的原则只有三个字,看心情。 68、身在福中不知福,说的是有些人已经发福了,但自己却装作不知道一样。 69、教室里拆开了一包零食就像人民广场喂鸽子,学校里带了一包面纸就好比城市广场发传单。 70、还没有拉黑你的原因是,可以在失落的时候,看看你过得有多惨,然后瞬间精神抖擞。 71、跟人说冬天东北的铁皮是甜的,总有人不信,还觉得这里面一定有什么猫腻,但就是忍不住要亲口尝一下。原创 2021-08-25 14:20:45 · 386 阅读 · 1 评论 -
js 格式化平级数组为联级数组树结构
原始数据为一维数组,通过该方法处理为联级数组原创 2021-08-09 14:30:25 · 267 阅读 · 1 评论 -
js 对比两个数组是否相同
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <script type="text/javascript">原创 2021-08-02 09:43:02 · 1562 阅读 · 5 评论 -
Object.defineProperty() 给对象添加字段
假如给vue对象想添加axios方法,一般都是:我们也可以换一种写法:原创 2021-04-30 14:27:49 · 299 阅读 · 0 评论 -
Web Components 原生开发使html组件化模块化
目录结构:入口文件:index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>使用组件</title> <!-- <link rel="import" href="co原创 2021-01-25 09:52:26 · 4572 阅读 · 8 评论 -
js 内置的三种弹框:alert、confirm、prompt
confirm()if (confirm("提示文字")) { console.log("点击了确定"); } else { console.log("点击了取消"); }alert()console.log(alert("提示文字"));if (alert("提示文字")) { console.log("点击了确定");} else { console.log("点击了取消");}prompt()let value = prompt("提示文.原创 2020-12-23 15:05:35 · 460 阅读 · 1 评论 -
js 数组转字符串,字符串转数组
数组转字符串var arr=["呀覅发","附件我发我","就让我委","那就按嗯"]; console.log(arr.join()); //默认按,分割console.log(arr.join("-")); //按-分割console.log(arr.join("/")); // 按/分割字符串转数组var str = "拿出来死啊,忘记烦恼是,积分晚礼服你,忘了粉色浪费你发,阿吉尔菲娜另外恶霸,服务冷风撒,放牛娃"; console.log(str.split(","原创 2020-10-29 10:02:33 · 1110 阅读 · 0 评论 -
js 对象动态增加属性key
属性[变量] = "值";示例:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>动态增加key</title> </head> <body> <scrip.原创 2020-10-24 15:26:11 · 2407 阅读 · 0 评论 -
js区分浏览器关闭 or 刷新
js浏览器关闭 or 刷新<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>浏览器关闭 or 刷新</title></head><body> <input type="button" onclick="disp_confirm()" value="Display a confirm box" /> <scri原创 2020-09-07 14:35:44 · 346 阅读 · 1 评论 -
js操作css变量(属性)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> :root { --bg: white; }.原创 2020-08-20 16:44:02 · 953 阅读 · 0 评论 -
js 正则匹配,从字符串中提取数字
/[^\d.]/glet num = "谷(2588.7元/kwh)".replace(/[^\d.]/g, "");console.log(num);原创 2020-07-27 14:53:42 · 8407 阅读 · 3 评论 -
js原生模块化开发:js文件inport导入和export导出
目录结构:创建文件,导出:导入:效果:原创 2020-07-26 11:25:37 · 2481 阅读 · 0 评论 -
使用html2canvas 页面转图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面转图片</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-.原创 2020-05-26 16:37:56 · 411 阅读 · 0 评论 -
js 进入页面只刷新一次
if (location.href.indexOf("#reloaded") == -1) { location.href = location.href + "#reloaded"; location.reload();}效果:注意看唰一下白屏时原创 2020-02-24 19:26:54 · 2377 阅读 · 1 评论 -
js 获取元素在页面中的位置
<!DOCTYPE html><html><head> <meta charset="utf-8"></head><style> div{ width: 100px; height: 120px; background-color: red; margin: 193px auto; }&l...原创 2020-02-21 18:27:38 · 1369 阅读 · 0 评论 -
js 复制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button onClick="copy(this)">复制</butto...原创 2020-04-27 10:32:26 · 338 阅读 · 0 评论 -
js 页面滚动
window.scrollTo();语法1: window.scrollTo(x,y);x 是文档中的横轴坐标。y 是文档中的纵轴坐标。例子: window.scrollTo(0,1000); // 垂直滚动到1000的位置语法2:window.scrollTo({options});top 等同于 yleft 等同于 xbehavior 表示滚动行为,传Str...原创 2020-04-21 12:12:58 · 841 阅读 · 0 评论 -
js 字符串按情况分割成数组
按情况分割var arr="1.jpg;2.png;3.jpg;4.png";console.log(arr.split(";")); // 每逢 ; 为一条原创 2020-04-13 17:01:09 · 1919 阅读 · 0 评论 -
js 读取.txt文件【FileReader实例的使用】
只能读取.txt文件,别的文件会报错<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>读取文件</title></head><body> <input type="file" id="sele...原创 2020-04-11 12:10:40 · 11853 阅读 · 1 评论 -
js 监听屏幕旋转变化(横屏/竖屏)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> window.addEventListener('onori...原创 2020-04-03 15:35:48 · 3349 阅读 · 0 评论