亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

21個(gè)簡(jiǎn)單而實(shí)用的 JavaScript 代碼片段

admin
2024年10月13日 22:53 本文熱度 1723

?


關(guān)于JavaScript的技巧,我們?cè)谥暗膬?nèi)容中也分享過(guò)很多,希望今天這期內(nèi)容能夠給你帶來(lái)新的知識(shí),從中學(xué)習(xí)到新內(nèi)容,那么,我們現(xiàn)在開(kāi)始吧。

1. 滾動(dòng)到頁(yè)面頂部
我們可以使用 window.scrollTo() 平滑滾動(dòng)到頁(yè)面頂部。
const scrollToTop = () => {  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });};

2. 滾動(dòng)到頁(yè)面底部

當(dāng)然,如果知道文檔的高度,也可以平滑滾動(dòng)到頁(yè)面底部。

const scrollToBottom = () => {  window.scrollTo({    top: document.documentElement.offsetHeight,    left: 0,    behavior: "smooth",  });};

3. 滾動(dòng)元素到可見(jiàn)區(qū)域

有時(shí)我們需要將元素滾動(dòng)到可見(jiàn)區(qū)域,該怎么辦? 使用scrollIntoView就足夠了。

const smoothScroll = (element) => {  element.scrollIntoView({    behavior: "smooth",  });};

4.全屏顯示元素

你一定遇到過(guò)這樣的場(chǎng)景,你需要全屏播放視頻并在瀏覽器中全屏打開(kāi)頁(yè)面。

const goToFullScreen = (element) => {  element = element || document.body;  if (element.requestFullscreen) {    element.requestFullscreen();  } else if (element.mozRequestFullScreen) {    element.mozRequestFullScreen();  } else if (element.msRequestFullscreen) {    element.msRequestFullscreen();  } else if (element.webkitRequestFullscreen) {    element.webkitRequestFullScreen();  }};

5.退出瀏覽器全屏狀態(tài)

是的,這個(gè)和第四點(diǎn)一起使用,你也會(huì)出現(xiàn)退出瀏覽器全屏狀態(tài)的場(chǎng)景。

const goExitFullscreen = () => {  if (document.exitFullscreen) {    document.exitFullscreen();  } else if (document.msExitFullscreen) {    document.msExitFullscreen();  } else if (document.mozCancelFullScreen) {    document.mozCancelFullScreen();  } else if (document.webkitExitFullscreen) {    document.webkitExitFullscreen();  }};

6.獲取數(shù)據(jù)類型

如何通過(guò)函數(shù)獲取變量的數(shù)據(jù)類型?

const getType = (value) => {  const match = Object.prototype.toString.call(value).match(/ (\w+)]/)  return match[1].toLocaleLowerCase()}
getType() // undefinedgetType({}}) // objectgetType([]) // arraygetType(1) // numbergetType('fatfish') // stringgetType(true) // booleangetType(/fatfish/) // regexp

7.停止冒泡事件

需要一種適用于所有平臺(tái)的防止事件冒泡的方法。

const stopPropagation = (event) => {  event = event || window.event;  if (event.stopPropagation) {    event.stopPropagation();  } else {    event.cancelBubble = true;  }};

8. 深拷貝對(duì)象

如何復(fù)制深度嵌套的對(duì)象?

const deepCopy = (obj, hash = new WeakMap()) => {  if (obj instanceof Date) {    return new Date(obj);  }  if (obj instanceof RegExp) {    return new RegExp(obj);  }  if (hash.has(obj)) {    return hash.get(obj);  }  let allDesc = Object.getOwnPropertyDescriptors(obj);  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);  hash.set(obj, cloneObj);  for (let key of Reflect.ownKeys(obj)) {    if (obj[key] && typeof obj[key] === "object") {      cloneObj[key] = deepCopy(obj[key], hash);    } else {      cloneObj[key] = obj[key];    }  }  return cloneObj;};

9. 確定設(shè)備類型

我們經(jīng)常需要這樣做,以便在手機(jī)上顯示 A 邏輯,在 PC 上顯示 B 邏輯。 基本上,設(shè)備類型是通過(guò)識(shí)別瀏覽器的 userAgent 來(lái)確定的。

const isMobile = () => {  return !!navigator.userAgent.match(    /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i  );};

10.判斷設(shè)備是Android還是IOS

除了區(qū)分是手機(jī)還是PC之外,很多時(shí)候我們還需要區(qū)分當(dāng)前設(shè)備是Android還是IOS。

const isAndroid = () => {  return /android/i.test(navigator.userAgent.toLowerCase());};
const isIOS = () => {  let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;  return reg.test(navigator.userAgent.toLowerCase());};

11.獲取瀏覽器類型及其版本

作為前端開(kāi)發(fā)人員,你可能會(huì)遇到各種兼容性問(wèn)題。 這時(shí),你可能需要獲取瀏覽器的類型和版本。

const getExplorerInfo = () => {  let t = navigator.userAgent.toLowerCase();  return 0 <= t.indexOf("msie")    ? {        //ie < 11        type: "IE",        version: Number(t.match(/msie ([\d]+)/)[1]),      }    : !!t.match(/trident\/.+?rv:(([\d.]+))/)    ? {        // ie 11        type: "IE",        version: 11,      }    : 0 <= t.indexOf("edge")    ? {        type: "Edge",        version: Number(t.match(/edge\/([\d]+)/)[1]),      }    : 0 <= t.indexOf("firefox")    ? {        type: "Firefox",        version: Number(t.match(/firefox\/([\d]+)/)[1]),      }    : 0 <= t.indexOf("chrome")    ? {        type: "Chrome",        version: Number(t.match(/chrome\/([\d]+)/)[1]),      }    : 0 <= t.indexOf("opera")    ? {        type: "Opera",        version: Number(t.match(/opera.([\d]+)/)[1]),      }    : 0 <= t.indexOf("Safari")    ? {        type: "Safari",        version: Number(t.match(/version\/([\d]+)/)[1]),      }    : {        type: t,        version: -1,      };};

12.設(shè)置cookie

cookie可能是我見(jiàn)過(guò)的最糟糕的API,它太難用了,我們不得不重新封裝它以最大限度地提高我們的開(kāi)發(fā)效率。

const setCookie = (key, value, expire) => {  const d = new Date();  d.setDate(d.getDate() + expire);  document.cookie = `${key}=${value};expires=${d.toUTCString()}`;};

13.獲取cookies

除了對(duì)cookie進(jìn)行寫入之外,我們還會(huì)涉及到它的讀取操作。

const getCookie = (key) => {  const cookieStr = unescape(document.cookie);  const arr = cookieStr.split("; ");  let cookieValue = "";  for (let i = 0; i < arr.length; i++) {    const temp = arr[i].split("=");    if (temp[0] === key) {      cookieValue = temp[1];      break;    }  }  return cookieValue;};

14.刪除cookies

刪除cookie的想法是什么? 其實(shí)只要將它的過(guò)期時(shí)間設(shè)置為此時(shí),它就會(huì)立即過(guò)期。

const delCookie = (key) => {  document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;};

15. 生成隨機(jī)字符串

不知道大家有沒(méi)有遇到過(guò)需要生成隨機(jī)字符串的場(chǎng)景。 我遇到過(guò)很多次了,每次都要重新google一遍,直到學(xué)會(huì)這個(gè)工具功能。

const randomString = (len) => {  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";  let strLen = chars.length;  let randomStr = "";  for (let i = 0; i < len; i++) {    randomStr += chars.charAt(Math.floor(Math.random() * strLen));  }  return randomStr;};
randomString(10) // pfkMfjEJ6xrandomString(20) // ce6tEx1km4idRNMtym2S

16. 將字符串的第一個(gè)字母大寫

const fistLetterUpper = (str) => {  return str.charAt(0).toUpperCase() + str.slice(1);};
fistLetterUpper('fatfish') // Fatfish

17.生成指定范圍內(nèi)的隨機(jī)數(shù)

也許出于測(cè)試目的,我經(jīng)常需要生成一定范圍內(nèi)的隨機(jī)數(shù)。

const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
randomNum(1, 10) // 6randomNum(10, 20) // 11

18. 打亂數(shù)組的順序

如何打亂數(shù)組原來(lái)的順序?

const shuffleArray = (array) => {  return array.sort(() => 0.5 - Math.random())}
let arr = [ 1, -1, 10, 5 ]
shuffleArray(arr) // [5, -1, 10, 1]shuffleArray(arr) // [1, 10, -1, 5]

19. 從數(shù)組中獲取隨機(jī)值

之前做過(guò)一個(gè)抽獎(jiǎng)項(xiàng)目,需要讓數(shù)組中的獎(jiǎng)品隨機(jī)出現(xiàn)。

const getRandomValue = array => array[Math.floor(Math.random() * array.length)]; const prizes = [  '$100', '??', '??' ]
getRandomValue(prizes) // ??getRandomValue(prizes) // ??getRandomValue(prizes) // ??

20.第一種格式化貨幣的方式

貨幣格式化的方式有很多種,比如這兩種方式。

const formatMoney = (money) => {  return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')  }
formatMoney('123456789') // '123,456,789'formatMoney('123456789.123') // '123,456,789.123'formatMoney('123') // '123'

21.第二種格式化貨幣的方式

正則表達(dá)式讓我們太頭疼了不是嗎? 因此,我們需要找到一種更簡(jiǎn)單的方式來(lái)格式化貨幣。

const formatMoney = (money) => {  return money.toLocaleString()}
formatMoney(123456789) // '123,456,789'formatMoney(123456789.123) // '123,456,789.123'formatMoney(123) // '123'

我太喜歡這種方式了,簡(jiǎn)單易懂。

總結(jié)

以上就是我想與你分享的21個(gè)關(guān)于JS的代碼技巧,希望這些代碼片段能夠幫助你提升工作效率。

最后,感謝你的閱讀,祝編程愉快。


該文章在 2024/10/14 10:24:09 編輯過(guò)
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved