LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

50 个实用前端 JavaScript/CSS 代码片段

admin
2025年7月5日 23:44 本文热度 45

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({ top0, 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(28)}`;}

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(minmax) {  return Math.floor(Math.random() * (max - min + 1)) + min;}

26. 监听窗口尺寸变化

window.addEventListener('resize'() => {  console.log('窗口尺寸变化:'window.innerWidthwindow.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(25);}

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.offsetWidthheight: 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 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved