笔记
0 篇文章
判断元素是滚动时动态加载判断元素是否是在滚动时动态加载出来的，通常需要结合以下两种方法：监听滚动事件：检测用户是否触发了滚动行为。观察元素是否进入视口：使用 IntersectionObserver或手动计算元素位置，判断元素是否出现在可视区域内。以下是具体的实现方法：方法 1：使用 IntersectionObserver（推荐）IntersectionObserver是浏览器提供的 API，用于
js 的同步加载在浏览器环境中，动态加载脚本（如通过 document.createElement('script')）是异步的，无法直接改为同步执行。这是因为浏览器的设计决定了脚本加载必须是异步的，以避免阻塞页面渲染和其他操作。不过，如果你需要实现类似“同步加载”的效果，可以通过以下方法模拟：方法 1：使用 async:false的 XMLHttpRequest或 fetch通过 XMLHttpRequ
懒加载代码我们可以创建一个函数 createLazyLoader，该函数接受一个标识符（例如 VConsoleLoader），以及一个回调函数（即实际要执行的代码）。这个函数将返回一个懒加载的占位符函数，可以用于任何需要懒加载的场景。以下是你的代码的完整示例：functioncreateLazyLoader(identifier,callback){//使用闭包来保存状态 letisLoaded=fa
动态加载 vConsole//动态加载 vConsole(functionloadVConsole(){constscript=document.createElement('script');script.src='https://unpkg.com/vconsole@latest/dist/vconsole.min.js';//script.src='file://../vconsole.js';s
版本号比较 functioncompareVersions(version1,version2){//将版本号按.分割为数组 constv1=version1.split('.').map(Number);constv2=version2.split('.').map(Number);//逐位比较 for(leti=0;i<Math.max(v1.length,v2.length);i++){//如果当前
从给定的 HTML 字符串中提取 data-av-id 属性的值要从给定的 HTML 字符串中提取 data-av-id属性的值，您可以使用 JavaScript 中的 DOM 解析方法或者正则表达式。这里我将展示两种方法：使用 DOM 解析-将字符串转换成 DOM 元素，然后查询该元素的属性。使用正则表达式-直接从字符串中提取所需的数据。方法 1:使用 DOM 解析 functiongetDataAvIdFromHtml(htmlS
js 加密和解密 window.crypto.subtle（也称为 crypto.subtle）提供了加密和解密字符串的能力，但请注意，它是一个低级别的 API，需要你自己处理密钥管理、编码转换等工作。下面是一个简单的例子，展示如何使用 AES-GCM 模式来加密和解密字符串。这里实现这样的效果 functionencrypt(key='string',data='string');functiondecrypt
复制到剪切板//复制文本到剪切板 functioncopyTextToClipboard(text){//创建一个隐藏的 textarea 元素 consttextarea=document.createElement("textarea");textarea.value=text;document.body.appendChild(textarea);//隐藏此输入框 textarea.style.posi
等待元素渲染完毕执行和 sleep//延迟执行 functionsleep(ms){returnnewPromise(resolve=>setTimeout(resolve,ms));}//等待元素渲染完成后执行 functionwhenElementExist(selector){returnnewPromise(resolve=>{constcheckForElement=()=>{letelemen
mouseover 防误碰在 JavaScript 中，处理 mouseover事件时，如果需要防止误触发（例如，用户快速移动鼠标或无意间触发），可以采取几种策略来优化用户体验。使用 setTimeout来延迟执行 mouseover的回调函数。如果用户在指定的时间内没有保持鼠标不动，则不会触发事件。lettimeoutId;element.addEventListener('mouseover',fun
js 模拟 Prompt 对话框
js 模拟 Prompt 对话框效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title> 自定义 Prompt 对话框 </title><style></style></head><body><script>//样式变量 constdialogStyleText=`.prompt-dialog{display:none;position:
js 简单拖动 div 示例 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title> 简单拖动示例 </title><style>.container{border:1pxsolid#000;width:20
手机端调试方案
手机端调试方案 seehttps://ld246.com/article/1734937500032 手机开启伺服模式，在电脑上用 devtools 移动端模拟器调试（推荐）https://github.com/Tencent/vConsole 或国内访问 https://gitee.com/Tencent/vConsole 如果是 webview 本身的问题，可以用自带浏览器调试，可参考 https://juejin
javaScript 同时执行多个任务方案在 JavaScript 中，如果需要同时执行多个任务，选择合适的方式取决于任务的性质、执行环境以及对性能和资源的需求。以下是几种常见的方式及其优缺点：1.setTimeout适用场景：简单的异步任务，任务之间没有强依赖关系。优点：实现简单，代码易于理解。不会阻塞主线程，适合轻量级任务。缺点：精度较低，setTimeout的最小延迟为 4ms（在现代浏览器中
js 判断所处平台//返回 android,ipad,iphone,macos,windows,AndroidTablet,linuxfunctiongetPlatform(){constuserAgent=window.navigator.userAgent;letdetectedPlatform=null;if(/iPhone/i.test(userAgent)&&!/iPad/i.test(use
insertAdjacentHTMLseehttps://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTMLinsertAdjacentHTML()方法将指定的文本解析为 Element元素，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的
console.log 也能插图！！！第一个例子是西瓜视频的控制台，输出一张图片。 第二个例子是 bilibili 的控制台， - 掘金
console.log 也能插图！！！第一个例子是西瓜视频的控制台，输出一张图片。第二个例子是 bilibili 的控制台，-掘金 console.log 也能插图！！！第一个例子是西瓜视频的控制台，输出一张图片。第二个例子是 bilibili 的控制台，-掘金 https://juejin.cn/post/6913554505841770509 第一个例子是西瓜视频的控制台，输出一张图片。第二个例子是 bilibil
grid 布局生成奇偶行选择器//生成奇数行和偶数行的选择器 functiongenerateSelectors(colNum){letevenSelectors=[];//偶数行的选择器 letoddSelectors=[];//奇数行的选择器//生成偶数行的选择器 for(letk=1;k<=colNum;k++){evenSelectors.push(`div:nth-child(${2*colNum
jsobject 有序类库实现示例当然可以创建一个库，它提供类似对象（Object）的点符号操作接口，但内部使用 Map来保证键值对的插入顺序。这可以通过 JavaScript 的类和 Proxy 对象来实现。下面是一个简单的实现示例：classOrderedObject{constructor(initialData={}){this._map=newMap();for(let[key,value]ofO
JavaScriptworker 进程通信在 JavaScript 中，Worker是运行在独立线程中的，无法直接访问主线程的全局变量或 DOM。为了实现 Worker与主线程之间的通信，以及 Worker之间的通信，可以使用以下几种方式：1.Worker与主线程之间的通信使用 postMessage和 onmessagepostMessage：用于发送消息。onmessage：用于
记录精彩的程序人生
开始使用
分类
标签