生成随机颜色
你的网站是否需要生成随机颜色?下面一行代码就可以实现。
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" });
滚动到底部
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "end" });