网页常用函数

1. 获取浏览器 Cookie 的值

使用 document.cookie 来获取 Cookie 的值。

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

2. 将 RGB 转换为十六进制

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);rgbToHex(0, 51, 255);
// Result: #0033ff`

3. 复制到剪贴板

使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板上。

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

4.检查日期是否有效

使用以下代码段检查日期是否有效。

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// Result: true

5.找出一年中的某一天

查找日期中的某一天。

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Result: 272

将6.字符串首字母大写

Javascript 没有内置的大写函数,因此我们可以使用以下代码。

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// Result: Follow for more

7.计算两天之间相差的天数

使用以下代码段查找给定 2 天之间相差的天数。

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366

8.清除所有 Cookie

通过使用 document.cookie 可以轻松清除存储在网页中的所有 cookie 。

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.\*/, `=;expires=${new Date(0).toUTCString()};path=/`));

9. 生成随机十六进制

使用 Math.random 和 padEnd 属性生成随机的十六进制。

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008

10. 数组去重

使用 SetJavaScript 可以轻松地删除重复项。超级有用!

const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]

11. 从 URL 获取查询参数

通过 window.location 或原始 URL 轻松查询 goole.com?search=easy&page=3 的参数。

const getParameters = (URL) => { URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');return JSON.stringify(URL);
};
getParameters(window.location)
// Result: { search : "easy", page : 3 }/---------------or-------------/Object.fromEntries(new URLSearchParams(window.location.search))

12. 从日期获取“时分秒”格式的时间

我们可以从日期中,获取到 hour : minutes : seconds 格式的时间:

const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"

13. 确认奇偶数

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: True
/---------------------or----------------/
const isEven = num => (num & 1) === 0
console.log(isEven(2));
// Result: True

14. 求平均值

使用 reduce 方法找到多个数字的平均值。

j

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

15. 回到顶部

使用 window.scrollTo(0, 0) 方法自动回到顶部。将 x 和 y 都设置为 0。

const goToTop = () => window.scrollTo(0, 0);
goToTop();

16. 翻转字符串

使用split,reverse 和 join 方法轻松翻转字符串。

const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// Result: 'dlrow olleh'

17. 检查数组是否为空

检查数组是否为空的简单代码,结果将返回 true 或 false。

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);
// Result: true

18. 获取用户选定的文本

使用内置 getSelection 属性获取用户选择的文本。

const getSelectedText = () => window.getSelection().toString();
getSelectedText();

19. 打乱数组

使用 sort 和 random 方法对数组进行打乱混合。

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

20. 检测用户是否处于暗模式

使用以下代码检查用户的设备是否处于暗模式。

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // Result: True or False

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

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

相关文章

python的输入input()和输出print(),及经验用法

python的输入和输出有什么用呢 各位&#xff0c;举个例子&#xff0c;在web应用当中&#xff0c;很多的用于与用户进行交互的输入输出大都是交给web前端的&#xff0c;尤其是交给javascript来完成&#xff0c;不仅简单、方便&#xff0c;而且能够减轻数据在服务器端与客户端之…

02-编码-YUV转H264

整体方案: 采集端:摄像头采集(YUV)->编码(YUV转H264)->RTMP推流 客户端:RTMP拉流->解码(H264转YUV)->YUV显示(SDL2) YUV转H264是一个视频编码的过程,具体的代码实现过程如下: #include <math.h> #include <stdlib.h> #ifdef __cplusplu…

另辟奚径-Android Studio调用Delphi窗体

大家都知道Delphi能调用安卓SDK&#xff0c;比如jar、aar等&#xff0c; 但是反过来&#xff0c;能在Android Studio中调用Delphi开发的窗体吗&#xff1f; 想想不太可能吧&#xff0c; Delphi用的是Pascal&#xff0c;Android Studio用的是Java&#xff0c;这两个怎么能混用…

layui table合计 totalRow 保留4位小数\ 异步请求数据的表格 新增行之后 如何更新数据

layui table合计 totalRow 保留4位小数: 例: totalRowMethod:(column: any, dataSource: any[]) > { let total 0; dataSource.forEach((item) > { total total Number(item[column.key]); …

Flutter——最详细(AppBar)使用教程

AppBar简介 Material Design 应用栏(标题栏) 使用场景&#xff1a; 顶部标题栏包括一些常用的菜单按钮 属性作用leading左边工具视图automaticallyImplyLeading左边图标的颜色title标题视图actions右边菜单按钮flexibleSpace其高度将与应用栏的整体高度相同bottom左侧底部文本内…

linux下IO模及其特点及select

ftp实现 模拟FTP核心原理&#xff1a;客户端连接服务器后&#xff0c;向服务器发送一个文件。文件名可以通过参数指定&#xff0c;服务器端接收客户端传来的文件&#xff08;文件名随意&#xff09;&#xff0c;如果文件不存在自动创建文件&#xff0c;如果文件存在&#xff0c…

阿里巴巴将开源720亿参数大模型;开源语言大模型演进史

&#x1f989; AI新闻 &#x1f680; 阿里巴巴将开源720亿参数大模型 摘要&#xff1a;在2023世界互联网大会乌镇峰会上&#xff0c;阿里巴巴集团CEO吴泳铭透露&#xff0c;阿里巴巴即将开源720亿参数大模型&#xff0c;这将是国内参数规模最大的开源大模型。目前&#xff0c…

Linux的基本指令(1)

目录 快速认识的几个指令 pwd指令 mkdir指令 touch指令 cd指令 clear指令 whoami指令 ls指令 ls -l ls -la ls 目录名 ls -ld 目录名 文件 路径 路径是什么&#xff1f; 路径的形成 ​ 怎么保证路径必须有唯一性&#xff1f; ls -la隐藏文件 隐藏文件的是什…

Haproxy实现七层负载均衡

目录 Haproxy概述 haproxy算法&#xff1a; Haproxy实现七层负载 ①部署nginx-server测试页面 ②(主/备)部署负载均衡器 ③部署keepalived高可用 ④增加对haproxy健康检查 ⑤测试 Haproxy概述 haproxy---主要是做负载均衡的7层&#xff0c;也可以做4层负载均衡 apache也可…

在Spring Boot中使用JTA实现对多数据源的事务管理

了解事务的都知道&#xff0c;在我们日常开发中单单靠事务管理就可以解决绝大多数问题了&#xff0c;但是为啥还要提出JTA这个玩意呢&#xff0c;到底JTA是什么呢&#xff1f;他又是具体来解决啥问题的呢&#xff1f; JTA JTA&#xff08;Java Transaction API&#xff09;是…

C++ 同构字符串/ 单词规律

给定两个字符串 s 和 t &#xff0c;判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t &#xff0c;那么这两个字符串是同构的。 每个出现的字符都应当映射到另一个字符&#xff0c;同时不改变字符的顺序。不同字符不能映射到同一个字符上&#xff0c;相…

Leetcode 剑指 Offer II 052. 递增顺序搜索树

题目难度: 简单 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给你一棵二叉搜索树&#xff0c;请 按中序遍历 将其重新排列为一…

Tomcat的Engine容器

https://tomcat.apache.org/tomcat-10.1-doc/config/engine.html Engine元素代表与一个特定的Catalina Service关联的、整体的请求处理系统。它从一个或多个Connector接收并处理请求、返回完整的响应给Connector&#xff0c;以便最终传输给客户端。 在Service元素内部&#xf…

初识RabbitMQ - 安装 - 搭建基础环境

RabbitMQ 各个名词介绍 Broker&#xff1a;接收和分发消息的应用&#xff0c;RabbitMQ Server 就是 Message Broker Virtual host&#xff1a;出于多租户和安全因素设计的&#xff0c;把 AMQP 的基本组件划分到一个虚拟的分组中&#xff0c;类似于网络中的 namespace 概念。当…

使用ffmpeg 压缩视频

我有一批1080p的视频,在网上播放占用空间太大,需要进行压缩以后再上传,下面是记录一下ffmpeg命令的使用情况 原视频大小:288mb --压缩加修改分辨率 640p ffmpeg -y -i C4995.mp4 -vcodec libx264 -crf 18 -s vga C4995\C4995_2.MP4 -y: 强制覆盖 -i :输入文件 -vcodec lib…

整治PPOCRLabel中cv2文件读取问题(更新中)

PPOCRLabel 使用PPOCRLabel对ocr预标注结果进行纠正由于PaddleOCR代码库十分混乱,路径经常乱调pip和代码库的代码&#xff08;pip库和源码冲突&#xff09;,经常报错&#xff0c;因此paddleocr和ppocrlabel都是使用pip包; 安装 pip install PPOCRLabel2.1.3启动 PPOCRLabel…

软件之禅(七)面向对象(Object Oriented)

黄国强 2023/11/11 前文提到面向对象构建的模块控制器&#xff0c;根据第一性原理&#xff0c;从图灵机的角度&#xff0c;面向对象不是最基本的元素。那么面向对象是不是不重要呢&#xff1f; 答案是否定的&#xff0c;面向对象非常非常重要。当我们面对一个具体的领域…

拦截器学习(黑马程序员)

实现步骤&#xff1a; 定义拦截器注册配置拦截器 1 自定义拦截器&#xff1a;实现HandlerInterceptor接口&#xff0c;并重写其所有方法&#xff1a; //自定义拦截器 Component public class LoginCheckInterceptor implements HandlerInterceptor { //目标资源方法执行前执…

2022最新版-李宏毅机器学习深度学习课程-P50 BERT的预训练和微调

模型输入无标签文本&#xff08;Text without annotation&#xff09;&#xff0c;通过消耗大量计算资源预训练&#xff08;Pre-train&#xff09;得到一个可以读懂文本的模型&#xff0c;在遇到有监督的任务是微调&#xff08;Fine-tune&#xff09;即可。 最具代表性是BERT&…

3.1 IDA Pro编写IDC脚本入门

IDA Pro内置的IDC脚本语言是一种灵活的、C语言风格的脚本语言&#xff0c;旨在帮助逆向工程师更轻松地进行反汇编和静态分析。IDC脚本语言支持变量、表达式、循环、分支、函数等C语言中的常见语法结构&#xff0c;并且还提供了许多特定于反汇编和静态分析的函数和操作符。由于其…