高端网站建设的品牌,cms站群管理系统,深圳建设集团有限公司好吗,wordpress添加商品画廊大厂面试题分享 面试题库
前后端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 本文收集了 12 个在日常开发中非常常用的函数#xff0c;有些可能很复杂#xff0c;有些可… 大厂面试题分享 面试题库
前后端面试题库 面试必备 推荐★★★★★
地址前端面试题库 web前端面试题库 VS java后端面试题库大全 本文收集了 12 个在日常开发中非常常用的函数有些可能很复杂有些可能很简单但我相信或多或少会对大家都会有所帮助。
生成随机颜色
你的网站是否需要生成随机颜色下面一行代码就可以实现。
const generateRandomHexColor () #${Math.floor(Math.random() * 0xffffff).toString(16)}console.log(generateRandomHexColor())
复制代码 数组重排序
对数组的元素进行重新排序是一项非常重要的技巧但是原生 Array 中并没有这项功能。
const shuffle (arr) arr.sort(() Math.random() - 0.5)const arr [1, 2, 3, 4, 5]
console.log(shuffle(arr))
复制代码 复制到剪切板
复制到剪切板是一项非常实用且能够提高用户便利性的功能。
const copyToClipboard (text) navigator.clipboard navigator.clipboard.writeText navigator.clipboard.writeText(text)copyToClipboard(Hello World!)
复制代码 检测暗色主题
暗色主题日益普及很多用的都会在设备中启用案模式我们将应用程序切换到暗色主题可以提高用户体验度。
const isDarkMode () window.matchMedia window.matchMedia((prefers-color-scheme: dark)).matches;console.log(isDarkMode())
复制代码 滚动到顶部
将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部设置 behavior 为 smooth 可以开启平滑滚动。
const scrollToTop (element) element.scrollIntoView({ behavior: smooth, block: start });
复制代码 滚动到底部
与滚动到顶部一样滚动到底部只需要设置 block 为 end 即可。
const scrollToBottom (element) element.scrollIntoView({ behavior: smooth, block: end });
复制代码 检测元素是否在屏幕中
检查元素是否在窗口中最好的方法是使用 IntersectionObserver。
const callback (entries) {entries.forEach((entry) {if (entry.isIntersecting) {// entry.target is the dom elementconsole.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);
复制代码 检测设备
使用 navigator.userAgent 来检测网站运行在哪种平台设备上。
const detectDeviceType () /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? Mobile : Desktop;console.log(detectDeviceType());
复制代码 隐藏元素
我们可以将元素的 style.visibility 设置为 hidden隐藏元素的可见性但元素的空间仍然会被占用。如果设置元素的 style.display 为 none会将元素从渲染流中删除。
const hideElement (el, removeFromFlow false) {removeFromFlow ? (el.style.display none): (el.style.visibility hidden)
}
复制代码 从 URL 中获取参数
JavaScript 中有一个 URL 对象通过它可以非常方便的获取 URL 中的参数。
const getParamByUrl (key) {const url new URL(location.href)return url.searchParams.get(key)
}
复制代码 深拷贝对象
深拷贝对象非常简单先将对象转换为字符串再转换成对象即可。
const deepCopy obj JSON.parse(JSON.stringify(obj))
复制代码
除了利用 JSON 的 API还有更新的深拷贝对象的 structuredClone API但并不是在所有的浏览器中都支持。
structuredClone(obj)
复制代码 等待函数
JavaScript 提供了 setTimeout 函数但是它并不返回 Promise 对象所以我们没办法使用 async 作用在这个函数上但是我们可以封装等待函数。
const wait (ms) new Promise((resolve) setTimeout(resolve, ms))const asyncFn async () {await wait(1000)console.log(等待异步函数执行结束)
}asyncFn()
大厂面试题分享 面试题库
前后端面试题库 面试必备 推荐★★★★★
地址前端面试题库 web前端面试题库 VS java后端面试题库大全
