前端原生：JavaScript
关注
分享
扫一扫
原生JS是每位大钱端的开发人员必备的底层技术
钱厚端
苟有恒，何必三更眠五更起；最无益，莫过一日曝十日寒
展开
-
原生开发使用ejs模板语言
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。原创 2025-05-13 15:34:46 · 496 阅读 · 0 评论 -
年会投票小游戏
https://github.com/open-frame/votehttps://download.youkuaiyun.com/download/qq_42618566/90206788原创 2024-12-31 09:53:23 · 324 阅读 · 0 评论 -
js ul li 事件委托
高性能的原生事件委托原创 2024-12-30 16:10:56 · 267 阅读 · 0 评论 -
js 前端实现复制粘贴图片到输入框上传
原生开发demo。复制或截图的图片来到输入框粘贴即拿到file原创 2024-09-06 21:16:04 · 841 阅读 · 0 评论 -
for await同步并发请求
【代码】for await同步并发请求。接口按顺序发起。第一个返回结果了，第二个执行。第二个返回结果了，第三个执行。以此类推 ......原创 2024-08-30 10:55:23 · 294 阅读 · 0 评论 -
js 时间工具
中国标准时间转为yyyy-mm-dd格式、获取指定日期前几/后几天的日期、获取指定月前几/后几月、计算时间差、获取开始日期和结束日期之间的所有日期、获取开始周和结束周之间的所有周、获取开始月份和结束月份之间的所有月份原创 2024-08-27 15:19:38 · 677 阅读 · 0 评论 -
原生js手撸乞丐版 vs code
原生 showDirectoryPicker() + FileReader() 技术实现原创 2024-02-18 14:02:28 · 899 阅读 · 2 评论 -
js原生超好用的数组分类方法Object.groupBy()
还自己手写联级方法吗？Object.groupBy() 就能搞定，用于菜单栏的数据很使用原创 2024-01-08 17:06:43 · 723 阅读 · 0 评论 -
js原生深拷贝方法：structuredClone() 告别自写时代
自2022年3月起，该功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中工作。原创 2023-12-25 10:52:52 · 1016 阅读 · 1 评论 -
js Intl.DateTimeFormat() 格式化时间利器
简单举例Intl.DateTimeFormat怎么使用原创 2023-12-14 15:46:20 · 1304 阅读 · 0 评论 -
实现环形进度圈
/x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针。原创 2023-12-05 09:34:12 · 536 阅读 · 0 评论 -
前端js语音朗读文本
SpeechSynthesisUtterance 的使用原创 2023-11-22 16:59:16 · 909 阅读 · 0 评论 -
巧妙使用js IntersectionObserver实现dom懒加载
原生js实现懒加载原创 2023-08-16 16:42:44 · 303 阅读 · 1 评论 -
js IntersectionObserver简单案例
介绍IntersectionObserver的基本使用原创 2023-08-16 16:24:55 · 318 阅读 · 0 评论 -
js数组 数据量大进行切片重组
比如10个为一段原创 2023-08-11 13:26:31 · 296 阅读 · 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 · 46800 阅读 · 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 · 1367 阅读 · 0 评论 -
前端大存储大量的数据，indexedDB浏览器端的数据的使用
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。. 该 API 使用索引实现对数据的高性能搜索。. 虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。原创 2022-11-17 16:09:18 · 580 阅读 · 0 评论 -
前端浏览器自带数据库增删改查操作：indexdDB的基础使用
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。原创 2022-10-28 17:57:13 · 1674 阅读 · 1 评论 -
js 封印对象，使其不能拓展属性：Object.preventExtensions()
方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。如果只是不允许添加属性，原创 2022-10-26 14:59:42 · 290 阅读 · 0 评论 -
js 封印对象：使其只能修改已有属性不能增删：Object.seal()
如果只是希望一个对象原有的属性值可以修改，但是不能添加或者删除属性，原创 2022-10-26 14:55:51 · 202 阅读 · 0 评论 -
js 禁止修改变量：冻结对象或数组 Object.freeze()
【代码】js 禁止修改变量：冻结已有数组的值。原创 2022-10-26 14:46:49 · 465 阅读 · 0 评论 -
js 禁止修改变量：冻结已有对象的属性：Object.defineProperty()
`Object.defineProperty()`的使用/ value: 2 // 定义该属性的值。// 是否出现在对象的枚举属性中。// 是否可以被删除。// 是否可以被修改。原创 2022-10-26 14:41:00 · 566 阅读 · 0 评论 -
web调用系统通知 Notification的使用
new Notification("同意了，通知一个");原创 2022-04-08 14:44:28 · 728 阅读 · 0 评论 -
web Worker前端多线程任务执行
new Worker()原创 2022-04-08 14:25:21 · 1229 阅读 · 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 · 3845 阅读 · 0 评论 -
js 原生最简单简洁的打印
67、我是一个很有原则的人，说到底我做人的原则只有三个字，看心情。 68、身在福中不知福，说的是有些人已经发福了，但自己却装作不知道一样。 69、教室里拆开了一包零食就像人民广场喂鸽子，学校里带了一包面纸就好比城市广场发传单。 70、还没有拉黑你的原因是，可以在失落的时候，看看你过得有多惨，然后瞬间精神抖擞。 71、跟人说冬天东北的铁皮是甜的，总有人不信，还觉得这里面一定有什么猫腻，但就是忍不住要亲口尝一下。原创 2021-08-25 14:20:45 · 433 阅读 · 1 评论 -
js 格式化扁平数组为联级数组树结构
原始数据为一维数组，通过该方法处理为联级数组原创 2021-08-09 14:30:25 · 303 阅读 · 1 评论 -
js 对比两个数组是否相同
用a的第一个元素和b的所有元素从左到右依次进行比较，找到相同元素就将a的这个元素和b的这个元素删除掉，接着用a的第二个元素和b的所有元素从左到右依次比较，相同元素就从a和b中删除掉，最后看a和b中 有没有多余的元素原创 2021-08-02 09:43:02 · 1656 阅读 · 5 评论 -
Object.defineProperty() 给对象添加字段
假如给vue对象想添加axios方法，一般都是：我们也可以换一种写法：原创 2021-04-30 14:27:49 · 328 阅读 · 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 · 4818 阅读 · 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 · 712 阅读 · 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 · 1149 阅读 · 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 · 2490 阅读 · 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 · 611 阅读 · 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 · 992 阅读 · 0 评论 -
js 正则匹配，从字符串中提取数字
/[^\d.]/glet num = "谷(2588.7元/kwh)".replace(/[^\d.]/g, "");console.log(num);原创 2020-07-27 14:53:42 · 8834 阅读 · 3 评论 -
js原生模块化开发：js文件inport导入和export导出
目录结构：创建文件，导出：导入：效果：原创 2020-07-26 11:25:37 · 2691 阅读 · 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 · 448 阅读 · 0 评论 -
js 进入页面只刷新一次
if (location.href.indexOf("#reloaded") == -1) { location.href = location.href + "#reloaded"; location.reload();}效果：注意看唰一下白屏时原创 2020-02-24 19:26:54 · 2436 阅读 · 1 评论