javaScript - 随笔分类 - 完美前端

js 查找当前文件夹的文件是否存在

摘要：const imgFiles = (require as any).context("./", false, /(\.png)|(\.jpg)$/) const imgUrls: any = {} imgFiles.keys().forEach((key: string) => { const id 阅读全文

posted @ 2024-06-10 19:10 完美前端阅读(106) 评论(0) 推荐(0)

uniapp 中截图保存当前页面，当前内容

摘要：https://html2canvas.hertzen.com/npm install --save html2canvasyarn add html2canvas<script setup>import { ref } from 'vue'import { 阅读全文

posted @ 2024-01-08 04:28 完美前端阅读(1823) 评论(0) 推荐(0)

js 数字运算出现精度问题类似1e-8，解决方案

摘要：其实我也是最近遇到这个问题，我发现 0.000000001 这样的数字会被转成科学计数法 1e-8类似这样的，但是小数点前面要是有一个非0的数字就不会自动转了，所以我是这么搞的，测试了常见的浏览器没有啥问题： let num = 0.00000001; let result = String(num 阅读全文

posted @ 2023-12-15 21:18 完美前端阅读(285) 评论(0) 推荐(0)

js PerformanceObserver 的entryTypes 所有类型

摘要：1. navigation - 页面性能这个 entryType 提供了与页面导航相关的性能度量。它可以告诉我们页面从开始加载到完全加载的整个过程中发生了什么。通过这些数据，我们可以了解到例如DNS解析时间、TCP握手时间、页面响应时间、页面下载时间等。应用场景: 当用户访问你的网站时，你可以使阅读全文

posted @ 2023-09-14 04:44 完美前端阅读(404) 评论(0) 推荐(0)

js PerformanceObserver 浏览器各项指标监测

摘要：# PerformanceObserver: 深入了解前端性能监测前端开发中，性能监测是一个重要的环节。为了更好地理解用户的实际体验，我们需要了解和监测网站的性能。`PerformanceObserver` 是 Web 性能 API 的一部分，用于监测性能指标。本文将详细介绍 `Performan 阅读全文

posted @ 2023-09-14 01:31 完美前端阅读(847) 评论(0) 推荐(0)

js 浏览器的5种observer 第五种 ReportingObserver 详解及使用方法

摘要：在前端开发中，对于浏览器的报告信息，例如弃用的 API 使用、浏览器的干预、CSS 特性使用情况等，我们常常需要一种机制来收集和处理。这时，ReportingObserver API 就发挥了它的作用。什么是 ReportingObserver？ // ReportingObserver 是一个浏阅读全文

posted @ 2023-09-12 18:53 完美前端阅读(370) 评论(0) 推荐(0)

js 浏览器的5种observer 第四种 PerformanceObserver 详解及使用方法

摘要：在前端性能分析领域，了解和监控网页的运行性能至关重要。PerformanceObserver API 为我们提供了一个强大的工具来监听性能时间线上的事件，从而实现更细粒度的性能监控。 PerformanceObserver 是一种浏览器提供的接口，允许我们订阅性能时间线上的特定类型事件。当与 Per 阅读全文

posted @ 2023-09-12 18:50 完美前端阅读(1238) 评论(0) 推荐(0)

js 浏览器的5种observer 第三种 ResizeObserver 详解及使用方法

摘要：ResizeObserver 它允许开发者监听元素的尺寸变化。在前端开发中，元素尺寸的变化可能会受到许多因素的影响，例如窗口大小调整、设备方向变化、内部内容变化等。提供了一种高效的方法来响应这些变化，而不需要频繁使用事件监听器或轮询技术。 1. 使用方法 const ro = new Resiz 阅读全文

posted @ 2023-09-12 18:45 完美前端阅读(2016) 评论(0) 推荐(0)

js 浏览器的5种observer 第二种 IntersectionObserver 详解及使用方法

摘要：IntersectionObserver 是一个现代的浏览器 API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。 1. 浏览器的兼容性 IntersectionObserver 目前在大多数现代浏览器中都得到了支持。但是在阅读全文

posted @ 2023-09-12 18:39 完美前端阅读(1475) 评论(0) 推荐(0)

js 浏览器的5种observer 第一种 MutationObserver 详解及使用方法

摘要：MutationObserver 提供了监听 DOM 树变化的能力。从简单的 UI 变更追踪到复杂的 SPA 页面变化都有涉及。可以追踪 DOM 树的变化，包括节点的增加、删除、属性的修改等。它是异步的，这意味着它会将所有的 DOM 变化集合起来一次性报告，而不是在每一次变化后立刻报告。兼容性阅读全文

posted @ 2023-09-12 18:37 完美前端阅读(2136) 评论(0) 推荐(0)

js customEvent 创建和触发自定义事件

摘要：在日常的 Web 开发中，我们经常与内置的浏览器事件互动，例如 click、input 和 submit。但有时，我们可能希望在特定情境下创建并触发自己的事件。这时，CustomEvent 就派上了用场。基本用法 // 使用 new CustomEvent 创建一个自定义事件 const myEv 阅读全文

posted @ 2023-09-12 00:36 完美前端阅读(1083) 评论(0) 推荐(0)

js中获取时间new Date()详细介绍

摘要：Date对象基础 // 创建一个Date对象 var myDate = new Date(); getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份阅读全文

posted @ 2022-09-16 21:00 完美前端阅读(3538) 评论(0) 推荐(0)

javascript 两个数组合并后随机打乱

摘要：定义变量 // 定义两个数组，分别用于存储充值和提现的列表 var arr1 = []; var arr2 = []; 合并数组 // 将arr2数组的内容合并到arr1数组中 rechargingList.push.apply(arr1, arr2); 向swiperContainer3List中阅读全文

posted @ 2022-07-05 18:22 完美前端阅读(65) 评论(0) 推荐(0)

js 获取http响应头信息

摘要：// 创建一个新的XMLHttpRequest对象 var req = new XMLHttpRequest(); // 注意：使用同步请求可能导致主线程阻塞，不建议在实际生产环境中使用 req.open('GET', document.location, false); //发送请求 req.se 阅读全文

posted @ 2022-06-29 15:01 完美前端阅读(959) 评论(0) 推荐(0)

js iframe传参

摘要：父级向iframe内部发送消息 // 获取iframe的引用 const mapFrame = this.$refs.iframeref; // 处理浏览器兼容性 if (mapFrame.attachEvent) { // IE浏览器中使用attachEvent mapFrame.attachEv 阅读全文

posted @ 2022-06-28 23:24 完美前端阅读(1239) 评论(0) 推荐(0)

vue 国家地区组件，带国家图标，带搜索

摘要：完整的代码, 可以复制引用 <template>  <view>  <view class="popup-bg" @click="getCountrieCode"></view>  <vi 阅读全文

posted @ 2022-05-22 18:55 完美前端阅读(747) 评论(0) 推荐(0)

json 全球的区域标识代码

摘要：[ { "area_code": "0093", "country_id": 2, "forbid": true, "name_cn": "阿富汗", "name_en": "Afghanistan" }, { "area_code": "00355", "country_id": 3, "forb 阅读全文

posted @ 2022-02-12 22:08 完美前端阅读(2478) 评论(0) 推荐(0)

css html 移动端适配 font-size: 13.33vw rem + vw

摘要：#### 使用 `vw` 实现响应式布局方法一：使用CSS计算功能这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。 /* 根据750宽度的设计稿计算font-size，即1rem = 100px; */ html { font-size: calc(100vw / 阅读全文

posted @ 2021-10-27 21:26 完美前端阅读(1121) 评论(0) 推荐(0)

js 拖拽跑马灯公告

摘要：完整的代码, 可以复制引用实现了一个通知条 (mequeText) 的滚动效果。当页面加载完成后，这个通知条开始从右往左滚动。当鼠标悬停在上面时，它停止滚动，并且当鼠标移出时它重新开始滚动。此外，用户还可以通过鼠标按下并拖动来手动移动这个通知条。 <!DOCTYPE html>; <html la 阅读全文

posted @ 2021-10-27 16:13 完美前端阅读(99) 评论(0) 推荐(0)

js 美东时间

摘要：显示美东时间的HTML结构 <p class="fr">;美东时间 <span id="mdsj">;</span>; (UTC -5:00)</p>; JavaScript 动态显示美东时间的方法 // 定义GetTime函数，动态地在页面上显示美东的当前时间 function GetTime(o 阅读全文

posted @ 2021-10-27 16:08 完美前端阅读(311) 评论(0) 推荐(0)

随笔分类 - javaScript

导航

公告