1. 判断是否为移动端
function isMobile() {  return /Mobi|Android|iPhone/i.test(navigator.userAgent);}
2. 获取元素距离页面顶部的距离
function getOffsetTop(el) {  let offset = 0;  while (el) {    offset += el.offsetTop;    el = el.offsetParent;  }  return offset;}
3. 防抖函数 debounce
function debounce(fn, delay = 300) {  let timer;  return function (...args) {    clearTimeout(timer);    timer = setTimeout(() => fn.apply(this, args), delay);  };}
4. 节流函数 throttle
function throttle(fn, delay = 300) {  let last = 0;  return function (...args) {    const now = Date.now();    if (now - last > delay) {      last = now;      fn.apply(this, args);    }  };}
5. 复制文本到剪贴板
function copyToClipboard(text) {  navigator.clipboard.writeText(text);}
6. 平滑滚动到页面顶部
function scrollToTop() {  window.scrollTo({ top: 0, behavior: 'smooth' });}
7. 判断对象是否为空
function isEmptyObject(obj) {  return Object.keys(obj).length === 0 && obj.constructor === Object;}
8. 数组去重
function unique(arr) {  return [...new Set(arr)];}
9. 生成随机颜色
function randomColor() {  return `#${Math.random().toString(16).slice(2, 8)}`;}
10. 获取 URL 查询参数
function getQueryParam(name) {  return new URLSearchParams(window.location.search).get(name);}
11. 判断是否为闰年
function isLeapYear(year) {  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;}
12. 数组乱序(洗牌算法)
function shuffle(arr) {  for (let i = arr.length - 1; i > 0; i--) {    const j = Math.floor(Math.random() * (i + 1));    [arr[i], arr[j]] = [arr[j], arr[i]];  }  return arr;}
13. 获取 cookie
function getCookie(name) {  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));  return match ? decodeURIComponent(match[2]) : null;}
14. 设置 cookie
function setCookie(name, value, days = 7) {  const d = new Date();  d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);  document.cookie = `${name}=${encodeURIComponent(value)};expires=${d.toUTCString()};path=/`;}
15. 删除 cookie
function deleteCookie(name) {  setCookie(name, '', -1);}
16. 判断元素是否在可视区域
function isInViewport(el) {  const rect = el.getBoundingClientRect();  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;}
17. 获取当前时间字符串
function getTimeString() {  return new Date().toLocaleString();}
18. 监听元素尺寸变化(ResizeObserver)
const ro = new ResizeObserver(entries => {  for (let entry of entries) {    console.log('size changed:', entry.contentRect);  }});ro.observe(document.querySelector('#app'));
19. 判断浏览器类型
function getBrowser() {  const ua = navigator.userAgent;  if (/chrome/i.test(ua)) return 'Chrome';  if (/firefox/i.test(ua)) return 'Firefox';  if (/safari/i.test(ua)) return 'Safari';  if (/msie|trident/i.test(ua)) return 'IE';  return 'Unknown';}
20. 监听页面可见性变化
document.addEventListener('visibilitychange', () => {  if (document.hidden) {    console.log('页面不可见');  } else {    console.log('页面可见');  }});
21. 判断图片是否加载完成
function isImageLoaded(img) {  return img.complete && img.naturalWidth !== 0;}
22. 获取元素样式
function getStyle(el, prop) {  return window.getComputedStyle(el)[prop];}
23. 监听粘贴事件并获取内容
document.addEventListener('paste', e => {  const text = e.clipboardData.getData('text');  console.log('粘贴内容:', text);});
24. 判断字符串是否为 JSON
function isJSON(str) {  try {    JSON.parse(str);    return true;  } catch {    return false;  }}
25. 生成指定范围的随机整数
function randomInt(min, max) {  return Math.floor(Math.random() * (max - min + 1)) + min;}
26. 监听窗口尺寸变化
window.addEventListener('resize', () => {  console.log('窗口尺寸变化:', window.innerWidth, window.innerHeight);});
27. 判断邮箱格式
function isEmail(str) {  return /^[\w.-]+@[\w.-]+\.\w+$/.test(str);}
28. 判断手机号格式(中国)
function isPhone(str) {  return /^1[3-9]\d{9}$/.test(str);}
29. 计算两个日期相差天数
function diffDays(date1, date2) {  const t1 = new Date(date1).getTime();  const t2 = new Date(date2).getTime();  return Math.abs(Math.floor((t2 - t1) / (24 * 3600 * 1000)));}
30. 监听键盘按键
document.addEventListener('keydown', e => {  console.log('按下了:', e.key);});
31. 获取页面滚动距离
function getScrollTop() {  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;}
32. 判断是否为数字
function isNumber(val) {  return typeof val === 'number' && !isNaN(val);}
33. 生成唯一ID(时间戳+随机数)
function uniqueId() {  return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);}
34. 监听鼠标右键菜单
document.addEventListener('contextmenu', e => {  e.preventDefault();  console.log('右键菜单被触发');});
35. 判断是否为函数
function isFunction(val) {  return typeof val === 'function';}
36. 获取本地存储 localStorage
function getLocal(key) {  return localStorage.getItem(key);}
37. 设置本地存储 localStorage
function setLocal(key, value) {  localStorage.setItem(key, value);}
38. 删除本地存储 localStorage
function removeLocal(key) {  localStorage.removeItem(key);}
39. 判断是否为 Promise
function isPromise(obj) {  return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';}
40. 获取当前页面路径
function getPath() {  return window.location.pathname;}
41. 监听剪贴板复制事件
document.addEventListener('copy', e => {  console.log('内容已复制到剪贴板');});
42. 判断是否为数组
function isArray(val) {  return Array.isArray(val);}
43. 获取元素宽高
function getSize(el) {  return { width: el.offsetWidth, height: el.offsetHeight };}
44. 判断是否为布尔值
function isBoolean(val) {  return typeof val === 'boolean';}
45. 监听页面滚动事件
window.addEventListener('scroll', () => {  console.log('页面滚动了');});
46. 判断是否为对象
function isObject(val) {  return val !== null && typeof val === 'object' && !Array.isArray(val);}
47. 获取当前域名
function getHost() {  return window.location.host;}
48. 判断是否为空字符串
function isEmptyString(str) {  return typeof str === 'string' && str.trim() === '';}
49. 监听窗口获得/失去焦点
window.addEventListener('focus', () => console.log('获得焦点'));window.addEventListener('blur', () => console.log('失去焦点'));
50. 判断是否为 DOM 元素
function isElement(obj) {  return obj instanceof Element;}
阅读原文:原文链接
该文章在 2025/7/7 11:35:39 编辑过