你的网站是否需要生成随机颜色?下面一行代码就可以实现。
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 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);
使用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')
}
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()
感谢你的阅读,如果本文对你有所帮助,不妨点个赞吧。