当前位置: 首页 > news >正文

分享几个好用js片段

        最近在做telegram小程序,所以又回归了web端了,发现几个好用又简洁的代码片段,在这里分享一下。

  1.  获取浏览器cookie值
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();cookie('_ga');

2. 将RGB转换为16进制

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

3. 复制到剪切板

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. 将字符串首字母大写

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

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

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

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

9. 生成随机16进制

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

10. 数组去重

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中获取查询参数

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 }

12. 获取用户选定的文本

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

有小伙伴有什么比较好的代码片段也可以分享出来呀!!! 

        

相关文章:

分享几个好用js片段

最近在做telegram小程序&#xff0c;所以又回归了web端了&#xff0c;发现几个好用又简洁的代码片段&#xff0c;在这里分享一下。 获取浏览器cookie值 const cookie name > ; ${document.cookie}.split(; ${name}).pop().split(;).shift();cookie(_ga); 2. 将RGB转换为1…...

web前端之实现一只可爱的小杰尼乌龟、伪元素、动画

MENU 前言效果图htmlstyle 前言 代码段使用HTML和CSS创建一个“杰尼龟”的动画。 效果图 html <div class"squirtle"><div class"tail"></div><div class"body"><div class"stomach"></div><d…...

银河麒麟服务器版在rc.local使用ifcong 配置IP和nmcli的区别

1、使用ifconfig配置IP ‌ifconfig是一个传统的网络配置工具&#xff0c;‌它直接操作网络接口&#xff0c;‌允许用户手动设置IP地址、‌子网掩码等网络参数。‌这种方式比较直接&#xff0c;‌但需要用户对网络接口和配置有较深入的了解。‌使用ifconfig配置的IP地址在系统重…...

【运维】深入理解 Linux 中的 `mv` 命令,使用 `mv` 移动所有文件但排除特定文件或文件夹

文章目录 一、基本语法二、基本用法三、使用 `mv` 移动所有文件但排除特定文件或文件夹**命令解释:**四、其他常用选项五、总结深入理解 Linux 中的 mv 命令:移动文件和文件夹的艺术 在日常使用 Linux 的过程中,mv(move)命令是我们经常会用到的一个命令,它不仅可以用来移…...

Xilinx课程,就这么水灵灵地上线了~

如果你想了解&#xff1a; 如何利用精通流水线&#xff08;Pipeline&#xff09;技术&#xff0c;让电路设计效率倍增&#xff1f; 如何掌握利用性能基线指导设计流程的方法&#xff1f; 如何理解集成电路设计中的UltraFast Design Methodology Implementation设计方法学中的…...

【axios get请求 中文乱码】

问题复现 前端请求&#xff1a; company/queryFenByOrgNo?orgNo5&qcNam%D2%BB%C6%DA qcNam 一期 后端接收&#xff1a; CompanyManagementController - 入参 orgNo“5”,qcNamһ&#xfffd;&#xfffd; 问题解决方案 let httpUrl this.httpcompany/queryFenByOrgNo…...

智能分析/视频汇聚EasyCVR安防视频融合管理云平台技术优势分析

安防行业的发展历程主要围绕视频监控技术的不断改革升级&#xff0c;从最初的模拟监控到数字监控&#xff0c;再到高清化、网络化监控&#xff0c;直至现在的智能化监控&#xff0c;每一次变革都推动了行业的快速发展。特别是近年来&#xff0c;随着AI、大数据、物联网等技术的…...

arcgis-坡度坡向分析

坡向的描述有定性和定量两种方式&#xff0c;定量是以东为0&#xff0c;顺时针递增&#xff0c;南为90&#xff0c;西为180&#xff0c;北为270等&#xff0c;范围在0&#xff5e;35959′59″之间。 定性描述有8方向法和4方向法. 8 方向为东、东南、南、西南、西、西北、北、东…...

【银河麒麟高级服务器操作系统】实际案例分析,xfsaild占用过高

了解银河麒麟操作系统更多全新产品&#xff0c;请点击访问麒麟软件产品专区&#xff1a;https://product.kylinos.cn 服务器环境及配置 物理机/虚拟机 物理机 处理器&#xff1a; Intel(R) Xeon(R) Silver 4110 CPU 2.10GHz 内存&#xff1a; 65536 MiB (64 GiB) 主板…...

JS中【setTimeout】使用注意事项总结

在JavaScript中&#xff0c;setTimeout是一个用于延迟执行某个函数的非常常见和有用的函数。使用setTimeout时&#xff0c;有几个重要的方面需要注意&#xff1a; 1. 基本用法 setTimeout的基本语法如下&#xff1a; setTimeout(function, delay);function&#xff1a;这是你…...

已解决ArkTS开发webview,html页面中的input和按钮等操作均无响应

在使用 ArkTS 开发 HarmonyOS 应用时&#xff0c;如果遇到 WebView 中的 HTML 页面元素&#xff08;如 input 输入框和 button 按钮&#xff09;无法响应操作的情况&#xff0c;通常与 WebView 的配置或权限设置有关。以下是常见的原因和解决方法。 1. 启用交互权限 确保你的…...

ChatGPT无法登录,提示我们检测到可疑的登录行为,将阻止进一步的尝试。请与管理员联系

1. 问题描述 之前本来已经连续稳定使用ChatGPT好几个月了&#xff0c;但是今天尝试登录ChatGPT的时候&#xff0c;却提示&#xff1a;我们检测到可疑的登录行为&#xff0c;将阻止进一步的尝试。请与管理员联系。 此外&#xff0c;我还在网上看到了一些相关的消息&#xff0c;…...

【数据结构篇】~复杂度

标题【数据结构篇】~复杂度 前言 C语言已经学完了&#xff0c;不知道大家的基础都打得怎么样了&#xff1f; 无论怎么说大家还是要保持持续学习的状态&#xff0c;来迎接接下来的挑战&#xff01; 现在进入数据结构的学习了&#xff0c;希望大家还是和之前一样积极学习新知识…...

深入理解Python中的JSON模块:解析与生成JSON数据的实用指南

深入理解Python中的JSON模块:解析与生成JSON数据的实用指南 在现代应用程序开发中,JSON(JavaScript Object Notation)已成为数据交换的标准格式。Python的json模块提供了简单而强大的工具来解析和生成JSON数据。本文将详细介绍如何使用json模块,包括基本概念、解析JSON数…...

机器学习三要素:模型、策略和算法

引言 随着人工智能技术的发展&#xff0c;机器学习已成为数据科学领域的核心组成部分。数据在机器学习方法框架中的流动&#xff0c;会按顺序经历三个过程&#xff0c;分别对应机器学习的三大要素&#xff1a;1. 模型&#xff1b;2. 策略&#xff1b;3. 算法。本文将深入探讨这…...

利用红黑树封装map和set

前言&#xff1a; 我们已经学过了如何去实现一棵完整的红黑树&#xff0c;而我们所知道的map和set容器的底层都是由红黑树实现的&#xff0c;因此我们今天来学习如何用红黑树来实现封装map和set。 本来我们需要两个红黑树去分别封装map和set&#xff0c;但是代码会有重复、冗…...

python pyqt5暂停和恢复功能

在PyQt5中&#xff0c;你可以通过结合按钮和事件处理来实现暂停和恢复功能。以下是一个简单的示例代码&#xff0c;演示了如何在PyQt5应用程序中实现暂停和恢复功能。 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton, QVBoxLayout, QWidget,…...

CAN总线详解-理论知识部分

目录 CAN总线简介 CAN总线硬件电路 CAN电平标准 CAN收发器 ​编辑 CAN物理层特性 CAN总线帧格式 数据帧 数据帧格式 数据帧发展历史 遥控帧 错误帧 过载帧 帧间隔 位填充 波形实例 CAN总线接收方数据采样 接收方数据采样遇到的问题 位时序 硬同步 再同步 波…...

【Java数据结构】---List(LinkedList)

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 文章目录 前言链表&#xff08;MyS…...

开发军用LabVIEW程序注意事项

在开发军用LabVIEW程序时&#xff0c;开发者需要从多个角度仔细考虑&#xff0c;以满足军方对安全性、可靠性、法规遵从性等方面的严格要求。由于军事系统通常涉及高度敏感的信息和严苛的环境条件&#xff0c;程序的设计必须保证数据的保密性、系统的稳定性以及与各种军事标准的…...

别再死记硬背了!一文搞懂EtherCAT四种寻址方式(附FMMU配置实例)

深入解析EtherCAT四大寻址机制&#xff1a;从原理到实战配置 第一次接触EtherCAT的工程师&#xff0c;往往会被其复杂的寻址方式搞得晕头转向。位置寻址、节点寻址、逻辑寻址、广播寻址——这些术语听起来相似却又各具特点&#xff0c;死记硬背不仅效率低下&#xff0c;更会在实…...

51单片机(九)—— 数码管动态扫描原理与实现

1. 数码管动态扫描原理揭秘 第一次接触多位数码管显示时&#xff0c;我盯着电路板百思不得其解&#xff1a;明明只有8个数据引脚&#xff0c;怎么能同时控制8位数码管显示不同内容&#xff1f;直到理解了动态扫描原理&#xff0c;才恍然大悟这背后的精妙设计。动态扫描本质上是…...

SMUDebugTool硬件调试实战:如何通过系统管理单元实现AMD Ryzen处理器深度优化

SMUDebugTool硬件调试实战&#xff1a;如何通过系统管理单元实现AMD Ryzen处理器深度优化 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. …...

给硬件工程师的PCIe协议栈拆解:从FPGA IP核视角看三层协议如何协同工作

给硬件工程师的PCIe协议栈拆解&#xff1a;从FPGA IP核视角看三层协议如何协同工作 当你在Xilinx UltraScale或Intel Stratix 10 FPGA中集成PCIe硬核IP时&#xff0c;是否曾好奇过那个配置向导里勾选的"Enable Advanced Mode"究竟在底层做了什么&#xff1f;物理层的…...

电视盒变身记:3步打造你的家庭全能服务器,闲置设备重获新生!

电视盒变身记&#xff1a;3步打造你的家庭全能服务器&#xff0c;闲置设备重获新生&#xff01; 【免费下载链接】amlogic-s9xxx-armbian amlogic-s9xxx-armbian: 该项目提供了为Amlogic、Rockchip和Allwinner盒子构建的Armbian系统镜像&#xff0c;支持多种设备&#xff0c;允…...

Vue+DataV+Echarts实战:从零搭建企业级数据可视化大屏(附完整代码)

1. 环境准备与项目初始化 数据可视化大屏开发的第一步是搭建基础开发环境。这里我推荐使用Vue CLI作为项目脚手架&#xff0c;它能帮我们快速初始化一个规范的Vue项目结构。先确保你的系统已安装Node.js&#xff08;建议LTS版本&#xff09;&#xff0c;然后在终端执行以下命令…...

华为防火墙NAT(Easy-IP)实战:多区域安全访问控制与地址转换

1. 华为防火墙NAT(Easy-IP)技术解析 华为防火墙的NAT(Easy-IP)功能是企业网络架构中实现安全访问和地址转换的核心技术。简单来说&#xff0c;它就像是一个智能门卫&#xff0c;不仅负责检查进出人员的身份&#xff08;安全策略&#xff09;&#xff0c;还能帮内部员工隐藏真实…...

LangChain实战:从零构建一个联网搜索增强的RAG问答系统

1. 为什么需要联网搜索增强的RAG系统 传统的RAG&#xff08;检索增强生成&#xff09;系统有个致命伤——它只能回答知识库里已有的内容。想象一下&#xff0c;你去年精心构建了一个旅游推荐系统&#xff0c;但今年新开的网红景点它完全不知道&#xff0c;因为数据没更新。这就…...

Attention Unet vs Unet++:在Camvid数据集上的性能对比实验

Attention Unet与Unet在Camvid数据集上的深度性能评测 语义分割作为计算机视觉领域的核心任务之一&#xff0c;其模型架构的创新从未停止。在众多改进方案中&#xff0c;Attention机制与嵌套跳跃连接&#xff08;Nested Skip Connection&#xff09;分别代表了两种不同的优化思…...

如何快速创建专业图表:Mermaid数据可视化的完整指南

如何快速创建专业图表&#xff1a;Mermaid数据可视化的完整指南 【免费下载链接】mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器&#xff0c;支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程图…...