分享 10个简单实用的 JS 代码技巧

代码图片生成工具:有码高清

一、滚动到页面顶部

我们可以使用 window.scrollTo() 平滑滚动到页面顶部。
在这里插入图片描述
源码:

const scrollToTop = () => {window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

二、滚动到页面底部

当然,如果知道文档的高度,也可以平滑滚动到页面底部。
在这里插入图片描述
源码:

const scrollToBottom = () => {window.scrollTo({top: document.documentElement.offsetHeight,left: 0,behavior: "smooth",});
};

三、将元素滚动到可见区域

有时候我们需要将元素滚动到可见区域,怎么办?使用 scrollIntoView 就足够了。
在这里插入图片描述

const smoothScroll = (element) => {element.scrollIntoView({behavior: "smooth",});
};

四、以全屏模式显示元素

你一定遇到过这样的场景,需要全屏播放视频,在浏览器中全屏打开页面。
在这里插入图片描述

const goToFullScreen = (element) => {element = element || document.body;if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullScreen();}
};

五、退出浏览器全屏状态

是的,这个和第4点一起使用,你也会有退出浏览器全屏状态的场景。
在这里插入图片描述

const goExitFullscreen = () => {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
};

六、获取数据类型

如何通过函数获取变量的数据类型?
在这里插入图片描述

const getType = (value) => {const match = Object.prototype.toString.call(value).match(/ (\w+)]/)return match[1].toLocaleLowerCase()
}getType() // undefined
getType({}}) // object
getType([]) // array
getType(1) // number
getType('fatfish') // string
getType(true) // boolean
getType(/fatfish/) // regexp

七、停止冒泡事件

需要一种适用于所有平台的防止事件冒泡的方法。
在这里插入图片描述

const stopPropagation = (event) => {event = event || window.event;if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;}
};

八、深拷贝一个对象

如何复制深度嵌套的对象?
在这里插入图片描述

const deepCopy = (obj, hash = new WeakMap()) => {if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj);}if (hash.has(obj)) {return hash.get(obj);}let allDesc = Object.getOwnPropertyDescriptors(obj);let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);hash.set(obj, cloneObj);for (let key of Reflect.ownKeys(obj)) {if (obj[key] && typeof obj[key] === "object") {cloneObj[key] = deepCopy(obj[key], hash);} else {cloneObj[key] = obj[key];}}return cloneObj;
};

九、确定设备类型

我们经常需要这样做,在手机上显示 A 逻辑,在 PC 上显示 B 逻辑。基本上,设备类型是通过识别浏览器的userAgent来确定的。
在这里插入图片描述

const isMobile = () => {return !!navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i);
};

十、判断设备是Android还是IOS

除了区分是手机端还是PC端,很多时候我们还需要区分当前设备是Android还是IOS。
在这里插入图片描述

const isAndroid = () => {return /android/i.test(navigator.userAgent.toLowerCase());
};const isIOS = () => {let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;return reg.test(navigator.userAgent.toLowerCase());
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41161.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汉王、绘王签字版调用封装

说明 需要配合汉王或绘王签字版驱动以及对应的sdk服务使用 constants.js //汉王、绘王sdk websocket连接地址 export const WS_URLS {1:ws://127.0.0.1:29999, //汉王2:ws://127.0.0.1:7181, }export const COMMAND1 {1: {HWPenSign: "HWStartSign",nLogo: "…

探索大型语言模型自动评估 LLM 输出长句准确性的方法

LLM现在能够自动评估较长文本中的事实真实性 源码地址:https://github.com/google-deepmind/long-form-factuality 论文地址:https://arxiv.org/pdf/2403.18802.pdf 这篇论文是关于谷歌DeepMind的,提出了新的数据集、评估方法和衡量标准&am…

vue2+element-ui新增编辑表格+删除行

实现效果&#xff1a; 代码实现 &#xff1a; <el-table :data"dataForm.updateData"border:header-cell-style"{text-align:center}":cell-style"{text-align:center}"><el-table-column label"选项字段"align"center&…

Linux 内核 GPIO 用户空间接口

文章目录 Linux 内核 GPIO 接口旧版本方式&#xff1a;sysfs 接口新版本方式&#xff1a;chardev 接口 gpiod 库及其命令行gpiod 库的命令行gpiod 库函数的应用 GPIO&#xff08;General Purpose Input/Output&#xff0c;通用输入/输出接口&#xff09;&#xff0c;是微控制器…

MAX()和ROW_NUMBER()函数的对比

SQL 查询中,使用 MAX() 函数和使用窗口函数 ROW_NUMBER() 都可以实现获取每个分组中某个列的最大值,但它们的实现方式和性能表现有所不同。以下是两者的区别和性能对比: 使用 MAX() 函数 SELECTMAX(d.times) FROMv_y d WHEREd.id = a.idAND d.name = a.nameAND d.age = a.…

交换机需要多大 buffer(续:更一般的原理)

前面用 aimd 系统分析了交换机 buffer 需求量随流数量增加而减少&#xff0c;今天从更一般的角度继续分析这事。 将交换机建模为一个 m/m/1 排队系统&#xff0c;多流场景下它就会变成一个 m/g/1 排队系统&#xff0c;而这事比前面的 aimd 系统分析更容易推导。 m/m/1 系统中…

哪里还可以申请免费一年期的SSL证书?

目前&#xff0c;要申请免费一年期的SSL证书&#xff0c;选项较为有限&#xff0c;因为多数供应商已转向提供短期的免费证书&#xff0c;通常有效期为90天。不过&#xff0c;有一个例外是JoySSL&#xff0c;它仍然提供一年期的免费SSL证书&#xff0c;但是只针对教育版和政务版…

halcon学习

halcon列程详细介绍-V1.3 从文件夹中遍历图片(用到的算子及实例) 1)list_files(::Directory,Options:Files) 功能:列出目录中的所有文件 参数列表: 第1个参数Directory为输入变量,需要列出的目录名字,即输入目录地址; 第2个参数Options为输入变量,默认值为files,建…

html三级菜单

示例 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Menu Example</title> <link re…

mybatispuls 分页插件的基本原理是什么?

MyBatis-Plus 是一个基于 MyBatis 的增强框架,它提供了许多额外的功能,其中分页插件是一个常用的功能。分页插件的基本原理是拦截 SQL 语句,在执行查询之前对 SQL 进行修改,以实现分页的功能。以下是 MyBatis-Plus 分页插件的基本原理及其工作机制: 1. 基本原理 分页插件…

LED显示屏跟COB显示屏有哪些不同?

COB显示屏跟LED显示屏的主要区别在于产品的显示效果、封装技术、耐用性、防护力、维护以及制造成本方面的不同&#xff0c;这里所说的LED显示屏主要指的是使用SMD封装的LED显示屏&#xff0c;今天跟随COB显示屏厂家中品瑞科技一起来详细看看具体分析&#xff1a; 一、封装技术 …

品牌推广的深层逻辑:自我提升与市场认同的和谐共生

品牌推广的深层逻辑&#xff1a;自我提升与市场认同的和谐共生 著名飞行员查尔斯林德伯格(Charles Lindbergh) 曾写道:“改善生活方式比传播生活方式更重要。如果我们自己的生活方式使别人感到满意&#xff0c;那么它将自动蔓延。如果不是这样&#xff0c;那么任何武力都不可能…

如何在 Odoo 16 中继承和更新现有邮件模板

在本文中,让我们看看如何在 Odoo 16 中继承和编辑现有邮件模板。我们必须这样做才能对现有模板的内容进行任何调整或更新。让我们考虑一个在会计模块中更新邮件模板的示例。 单击“account.move”模型中的“发送并打印”按钮后,将打开上述向导。在这里,我们将进行更改。从…

8人团队历时半年打造开源版GPT-4o,零延迟演示引爆全网!人人可免费使用!

目录 01 Moshi 02 背后技术揭秘 GPT-4o可能要等到今年秋季才会公开。 然而&#xff0c;由法国8人团队开发的原生多模态Moshi&#xff0c;已经达到了接近GPT-4o的水平&#xff0c;现场演示几乎没有延迟&#xff0c;吸引了大量AI专家的关注。 令人惊讶的是&#xff0c;开源版的…

Python酷库之旅-第三方库Pandas(003)

目录 一、用法精讲 4、pandas.read_csv函数 4-1、语法 4-2、参数 4-3、功能 4-4、返回值 4-5、说明 4-6、用法 4-6-1、创建csv文件 4-6-2、代码示例 4-6-3、结果输出 二、推荐阅读 1、Python筑基之旅 2、Python函数之旅 3、Python算法之旅 4、Python魔法之旅 …

T100-XG查询报表的开发

制作XG报表 1、注册程序 azzi900 首先现将程序注册一下,在内部构建基础代码档。 2、注册作业 azzi910 也是直接新增一个,作业跟程序绑定一下。 3、T100签出规格程序 这个时候应该是没签出的,首先将规格迁出。 4、T100画面产生器 规格迁出之后,这个时候还需要生成一个画…

springcloud-gateway 网关组件中文文档

Spring Cloud网关 Greenwich SR5 该项目提供了一个基于Spring生态系统的API网关&#xff0c;其中包括&#xff1a;Spring 5&#xff0c;Spring Boot 2和项目Reactor。Spring Cloud网关的目的是提供一种简单而有效的方法来路由到API&#xff0c;并向它们提供跨领域的关注&#x…

Java中的数据脱敏与隐私保护技术

Java中的数据脱敏与隐私保护技术 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着信息化进程的加深&#xff0c;数据安全和隐私保护越来越受到关注。数据脱…

Python文件读入操作

本套课在线学习视频&#xff08;网盘地址&#xff0c;保存到网盘即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/e2ba7867f034​​ Python编程中&#xff0c;文件操作是一项基础且重要的技能。本文将详细介绍如何使用Python进行文件的打开、读取、写入和关…

配置基于不同IP地址的虚拟主机

定义配置文件vhost.conf <directory /www> allowoverride none require all granted </directory> <virtualhost 192.168.209.136:80> documentroot /www servername 192.168.209.136 </virtualhost><virtualhost 192.168.209.138:80> document…