欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

19個解決常見JavaScript問題的代碼片段

admin
2024年10月13日 22:57 本文熱度 517

在我們的開發人員工作流程中,我們經常遇到具有挑戰性的問題,可能只需要幾行代碼就可以解決。

在今天文章中,我將分享19個有用的JS代碼片段,這些代碼片段可以在您處理 URL、DOM、事件、日期、用戶首選項等時為您提供幫助。

現在開始吧。

1. 如何獲取URL?

const getBaseURL = url => url.replace(/[?#].*$/, '');
getBaseURL('http://url.com/page?name=Adam&surname=Smith');// 'http://url.com/page'

2. 如何檢查URL是否是絕對的?

const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
isAbsoluteURL('https://google.com'); // trueisAbsoluteURL('ftp://www.myserver.net'); // trueisAbsoluteURL('/foo/bar'); // false

3. 如何獲取URL參數作為對象?

const getURLParameters = url =>  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(    (a, v) => (      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a    ),    {}  );
getURLParameters('google.com'); // {}getURLParameters('http://url.com/page?name=Adam&surname=Smith');// {name: 'Adam', surname: 'Smith'}

4. 如何檢查元素是否包含另一個元素?

const elementContains = (parent, child) =>  parent !== child && parent.contains(child);
elementContains(  document.querySelector('head'),  document.querySelector('title'));// trueelementContains(document.querySelector('body'), document.querySelector('body'));

5.如何獲取元素的所有祖先?

const getAncestors = el => {  let ancestors = [];  while (el) {    ancestors.unshift(el);    el = el.parentNode;  }  return ancestors;};
getAncestors(document.querySelector('nav'));// [document, html, body, header, nav]

6. 如何平滑滾動元素到視圖中?

const smoothScroll = element =>  document.querySelector(element).scrollIntoView({    behavior: 'smooth'  });
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBarsmoothScroll('.fooBar');// scrolls smoothly to the first element with a class of fooBar

7. 如何處理元素外的點擊?

const onClickOutside = (element, callback) => {  document.addEventListener('click', e => {    if (!element.contains(e.target)) callback();  });};
onClickOutside('#my-element', () => console.log('Hello'));// Will log 'Hello' whenever the user clicks outside of #my-element

8. 如何生成UUID?

const UUIDGeneratorBrowser = () =>  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>    (      c ^      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))    ).toString(16)  );
UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

9. 如何獲取選中的文本?

const getSelectedText = () => window.getSelection().toString();
getSelectedText(); // 'Lorem ipsum'

10.如何復制文本到剪貼板?

const copyToClipboard = str => {  if (navigator && navigator.clipboard && navigator.clipboard.writeText)    return navigator.clipboard.writeText(str);  return Promise.reject('The Clipboard API is not available.');};

11. 如何給HTML元素添加樣式?

const addStyles = (el, styles) => Object.assign(el.style, styles);
addStyles(document.getElementById('my-element'), {  background: 'red',  color: '#ffff00',  fontSize: '3rem'});

12. 如何切換全屏模式?

const fullscreen = (mode = true, el = 'body') =>  mode    ? document.querySelector(el).requestFullscreen()    : document.exitFullscreen();
fullscreen(); // Opens `body` in fullscreen modefullscreen(false); // Exits fullscreen mode

13. 如何檢測Caps Lock是否打開?

<form>  <label for="username">Username:</label>  <input id="username" name="username">
 <label for="password">Password:</label>  <input id="password" name="password" type="password">  <span id="password-message" style="display: none">Caps Lock is on</span></form>
const el = document.getElementById('password');const msg = document.getElementById('password-message');
el.addEventListener('keyup', e => {  msg.style = e.getModifierState('CapsLock')    ? 'display: block'    : 'display: none';});

14. 如何檢查日期是否有效?

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid('December 17, 1995 03:24:00'); // trueisDateValid('1995-12-17T03:24:00'); // trueisDateValid('1995-12-17 T03:24:00'); // falseisDateValid('Duck'); // falseisDateValid(1995, 11, 17); // trueisDateValid(1995, 11, 17, 'Duck'); // falseisDateValid({}); // false

15. 如何從 Date 中獲取冒號時間?

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // '08:38:00'

16. 如何查看當前用戶的首選語言?

const detectLanguage = (defaultLang = 'en-US') =>  navigator.language ||  (Array.isArray(navigator.languages) && navigator.languages[0]) ||  defaultLang;
detectLanguage(); // 'nl-NL'

17. 如何查看用戶喜歡的配色方案?

const prefersDarkColorScheme = () =>  window &&  window.matchMedia &&  window.matchMedia('(prefers-color-scheme: dark)').matches;
prefersDarkColorScheme(); // true

18. 如何檢查設備是否支持觸摸事件?

const supportsTouchEvents = () =>  window && 'ontouchstart' in window;
supportsTouchEvents(); // true

19. URL對象

const url = new URL("https://example.com/login?user=someguy&page=news");
url.origin// "https://example.com"url.host// "example.com"url.protocol// "https:"url.pathname// "/login"url.searchParams.get('user')// "someguy"


總結

以上就是我今天與你分享的全部內容,希望對你有所幫助,最后,感謝你的閱讀,祝編程愉快!


該文章在 2024/10/14 10:19:47 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved