首页 > 基础资料 博客日记
一些JavaScript函数
2023-08-11 20:34:48基础资料围观696次
Java资料网推荐一些JavaScript函数这篇文章给大家,欢迎收藏Java资料网享受知识的乐趣
1、生成随机颜色
const generateRandomHexColor=()=>`#${Math.floor(Math.random() * 0xffffff).toString(16)}`
console.log(generateRandomHexColor())
2、数组重排序
const shuffle=(arr)=>arr.sort(()=>Math.random()-0.5) const arr=[1,2,3,4,5] console.log(shuffle(arr))
3、复制到剪切板
const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)
copyToClipboard("Hello World!")
4、滚动到顶部
将元素滚动到顶部最简单的方法是使用scrollIntoView。设置block为start可以滚动到顶部;设置behavior为smooth可以开启平滑滚动
const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth", block: "start" });
5、滚动到底部
const scrollToBottom = (element) => element.scrollIntoView({ behavior: "smooth", block: "end" });
6、检测元素是否在屏幕中
使用的方法是IntersectionObserver
const callback = (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // `entry.target` is the dom element console.log(`${entry.target.id} is visible`); } }); }; const options = { threshold: 1.0, }; const observer = new IntersectionObserver(callback, options); const btn = document.getElementById("btn"); const bottomBtn = document.getElementById("bottom-btn"); observer.observe(btn); observer.observe(bottomBtn);
7、检测设备
const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? "Mobile" : "Desktop"; console.log(detectDeviceType());
8、隐藏元素
const hideElement = (el, removeFromFlow = false) => { removeFromFlow ? (el.style.display = 'none') : (el.style.visibility = 'hidden') }
9、从url中获取参数
const getParamByUrl = (key) => { const url = new URL(location.href) return url.searchParams.get(key) }
10、等待函数
const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms)) const asyncFn = async () => { await wait(1000) console.log('等待异步函数执行结束') } asyncFn()
原文来自:https://juejin.cn/post/7127278574033174542
文章来源:https://www.cnblogs.com/chao202426/p/16566437.html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
标签:
相关文章
最新发布
- 15. 别再硬写提示词了!LangChain ChatPromptTemplate核心实战
- 一次 OOM 线上排查实录
- 从控制论看 Harness Engineering:当反馈回路终于能在"重要的地方"闭合
- AI 测试全场景提效:功能 / 性能 / 安全 / 自动化,用 AI 重塑测试工作流
- 你真的理解 volatile 关键字了吗?
- .NET 11 Preview 4 震撼发布:MAUI 抛弃 Mono,全量迁移 CoreCLR,性能与 NativeAOT 双炸场!
- 博客园 × Halo 建站|国产电商新选择,商城版永久授权,3 折升级特惠!
- .NET 与鸿蒙的“技术巧遇”
- Docker学习笔记:后端、数据库和反向代理怎么一起跑起来
- Codex 接入 Notion:把 AI 结果写回知识库

