整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
您將了解到11個非常有用的單行代碼，它能幫助我們做很多事，不要小瞧了HTML哦!!!
HTML 和 CSS 是前端開發(fā)世界的支柱。雖然精通 CSS 和 JavaScript 對于創(chuàng)建出色的網(wǎng)站至關重要，但人們經(jīng)常低估您僅使用一個普通的舊 HTML 文件就可以完成的工作。從延遲加載圖像到為視頻添加字幕，HTML 能夠完成大多數(shù)開發(fā)人員并不完全了解的許多事情。以下是您可以立即使用的 11 個 HTML 單行代碼
向 HTML 元素添加簡單的工具提示不需要 CSS 或 JavaScript。 使用 title 屬性，您可以輕松添加工具提示以向用戶提供額外信息。
<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>
當您希望用戶下載鏈接而不是導航到文件時，下載屬性非常有用。 此外，您還可以設置用戶將下載的文件的文件名
<a href="/images/myw3schoolsimage.jpg" download>
<a href="link/to/your/file" download="filename">Download link</a>
沒有人喜歡HTML在不該打斷的地方打斷文字。 使用<wbr>，您可以輕松地找到可以打斷單詞的點(機會)。 當單詞太長，瀏覽器很有可能會在不正確的地方打斷它時，這很有用。
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
使用DIR=“AUTO”，瀏覽器將根據(jù)內容的語言更改文本對齊。當您處理不遵循左邊的語言時，這非常有用。使用此屬性的潛在地點是社交媒體聊天應用程序。
<p dir="auto">This text is following dir=auto</p>
通過使用細節(jié)和摘要語義元素，您可以創(chuàng)建一個非常基本但很容易的手風琴。將accordion元素與details元素打包，而標題則使用summary元素。最后，使用p段落元素來編寫手風琴的主要內容。
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
通過將contentteditable屬性設置為true，可以使任何內容都可編輯。 不管它是div還是p，它都是可編輯的。 此外，還可以使用isContentEditable屬性來查找某個元素是否可編輯。
<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
只需使用 HTML，您就可以使用 <track> 元素為視頻文件添加字幕。 使用 src 屬性指向字幕文件，使用 srclang 屬性設置語言。
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
你可以通過設置加載屬性為“l(fā)azy”來按需加載圖片(也叫惰性加載)。 這是一種簡單但非常有效的優(yōu)化技術，只加載對用戶可見的部分，其他圖像稍后根據(jù)用戶的需要加載。
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
如果您在您的網(wǎng)站上多次調用一個公共域，您可以使用**<base>**元素來設置一個基本URL，如下面提供的代碼片段所示。 現(xiàn)在，src在圖像元素中的實際值是“www.w3schools.com/images/stic… 如果您使用過像Axios這樣的庫，那么設置基URL是一種非常常見的做法。
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
您可以在使用右鍵單擊時收聽事件，也可以嘗試使用OnContextMenu和OnPaste屬性粘貼內容并處理這些事件。如果您不希望用戶能夠粘貼到密碼等某些字段上，則可以在該輸入字段上寫入Onpaste=“返回false”，用戶將無法粘貼到那里。同樣，oncontextmenu在用戶右鍵單擊該元素時會觸發(fā)。
<input type="text" onpaste="return false" value="Paste something in here">
<div oncontextmenu="myFunction()" contextmenu="mymenu">
當設置為 true 時，拼寫檢查屬性會告訴瀏覽器必須檢查用戶在此元素中輸入的語法和拼寫錯誤。 這是一個方便的屬性，可幫助用戶編寫正確無誤的內容。
avaScript 發(fā)展至今已經(jīng)變得越來越強大，且廣泛用于前端和后端開發(fā)。
作為一名前端程序員，不斷的學習精進技巧，了解JS的最新發(fā)展也是非常必要的，而簡潔的一行代碼示例就是很好的方法。
今天，我們有 21 個JavaScript單行代碼技巧，增強我們對 JavaScript 的理解并幫助您編寫更簡潔、更有效的代碼。展示 JavaScript 的優(yōu)雅和高效。
1. 檢查變量是否是數(shù)組：
const isArray=variable=> Array.isArray(variable);Array.isArray() 方法檢查給定變量是否是數(shù)組。
2. 獲取數(shù)組中的最后一項：
const lastItem=array=> array.slice(-1)[0];通過使用負數(shù)組索引和 slice() 方法，我們可以輕松檢索數(shù)組中的最后一項。
3. 生成一個范圍內的隨機數(shù)：
const randomNumber=(min, max)=> Math.floor(Math.random() * (max - min + 1)) + m使用 Math.random()、Math.floor() 和一點算術，我們可以生成指定范圍內的隨機數(shù)。
4. 合并兩個數(shù)組：
const mergedArray=(array1, array2)=> [...array1, ...array2];擴展運算符 (...) 允許我們將兩個數(shù)組合并為一個數(shù)組。
5. 從數(shù)組中刪除重復項：
const uniqueArray=array=> [...new Set(array)];通過使用 Set 對象和展開運算符，我們可以輕松地消除數(shù)組中的重復值。
6. 將字符串的第一個字母大寫：
const capitalize=string=> string.charAt(0).toUpperCase() + string.slice(1);這個簡潔的代碼片段將給定字符串的第一個字母大寫。
7. 檢查字符串是否包含子字符串：
const containsSubstring=(string, substring)=> string.includes(substring);使用includes()方法，我們可以快速判斷一個字符串是否包含特定的子字符串。
8. 查找數(shù)組中的最大數(shù)字：
const maxNumber=array=> Math.max(...array);使用擴展運算符和 Math.max() 方法，我們可以輕松找到數(shù)組中的最大數(shù)字。
9. 計算數(shù)字數(shù)組的總和：
const sumArray=array=> array.reduce((total, num)=> total + num, 0);reduce() 方法允許我們通過迭代地將每個元素添加到運行總計中來計算數(shù)組的總和。
10. 反轉字符串：
const reverseString=string=> string.split('').reverse().join('');此單行代碼使用 split()、reverse() 和 join() 方法來反轉給定的字符串。
11. 打亂數(shù)組：
const shuffleArray=array=> array.sort(()=> Math.random() - 0.5);通過提供生成隨機值的自定義排序函數(shù)，我們可以對數(shù)組的元素進行打亂。
12. 從數(shù)組中刪除假值：
const truthyValues=array=> array.filter(Boolean);filter() 方法與布爾構造函數(shù)一起允許我們從數(shù)組中刪除假值（例如 null、undefined 和 false）。
13. 截斷字符串并在超過指定長度時添加省略號：
const truncateString=(string, maxLength)=> string.length > maxLength ? string.slice(0, maxLength) + '...' : string;此單行將字符串截斷為指定長度，并在超過該長度時附加省略號。
14. 查找數(shù)組中元素第一次出現(xiàn)的索引：
const indexOfElement=(array, element)=> array.indexOf(element);indexOf() 方法返回數(shù)組中給定元素第一次出現(xiàn)的索引。
15. 檢查字符串是否為回文：
const isPalindrome=string=> string===string.split('').reverse().join('');這個簡潔的代碼片段通過將字符串與其反轉版本進行比較來檢查字符串是否為回文。
16. 將字符串轉換為字符數(shù)組：
const stringToArray=string=> Array.from(string);Array.from() 方法將可迭代對象（例如字符串）轉換為數(shù)組。
17. 生成指定范圍內的數(shù)字數(shù)組：
const rangeArray=(start, end)=> Array.from({length: end - start + 1}, (_, i)=> start + i);使用 Array.from() 方法和箭頭函數(shù)，我們可以生成給定范圍內的數(shù)字數(shù)組。
18. 刪除字符串開頭和結尾的空格：
const trimString=string=> string.trim();Trim() 方法刪除字符串兩端的空格。
19. 求一組數(shù)字的平均值：
const average=array=> array.reduce((total, num)=> total + num, 0) / array.length;通過將數(shù)組的總和除以它的長度，我們可以計算出數(shù)字的平均值。
20. 檢查數(shù)字是否為偶數(shù)：
const isEven=number=> number % 2===0;這個簡潔的代碼片段通過驗證數(shù)字除以 2 的余數(shù)是否為零來檢查數(shù)字是否為偶數(shù)。
21. 從鍵值對數(shù)組創(chuàng)建對象：
const objectFromPairs=pairs=> Object.fromEntries(pairs);Object.fromEntries() 方法從鍵值對數(shù)組創(chuàng)建一個對象。
怎么樣？這些簡潔的一行代碼示例，有沒有讓你瞬間get新技能呢？提高 JavaScript 技能并學習編寫高效、讓代碼變優(yōu)雅新方法。
最后，想要前端相關的什么知識點文章可以直接留言給我們！會在之后的發(fā)文中安排上！
讓優(yōu)秀的教育資源不再孤芳自賞，與你共享！
——千鋒數(shù)字智慧大前端
avaScript可以實現(xiàn)很多令人驚奇的事！
從復雜的框架到處理API，有太多的東西可以學習。
甚至，僅用一行代碼，它也能完成一些很棒的工作。
不信？那么請看這13條JavaScript單行代碼，用上它們，會讓你看起來特別專業(yè)！
使用Math.random()方法可以讓函數(shù)返回布爾值（true或false）。Math.random會創(chuàng)建一個介于0和1之間的隨機數(shù)，然后我們檢查這個數(shù)是大于還是小于0.5。也就是說，有50％/50％的幾率得到true或false。
以下JS代碼塊顯示了如何使用Math.Random方法獲取隨機布爾值。
const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false
我們可以通過此方法來檢查函數(shù)中提供的日期是工作日還是周末。
以下JS代碼塊顯示了如何編寫一個返回指定日期是工作日還是周末的函數(shù)。
const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)
有兩種不同的方式可以反轉字符串。使用split()，reverse()和join()方法是最簡單的方法之一。
以下JS代碼塊顯示了如何反轉字符串。
const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// Result: 'dlrow olleh'
我們可以使用document.hidden屬性來檢查當前tab是否在視圖/焦點中。
以下JS代碼塊顯示了如何使用文檔的hidden屬性來獲取當前tab是否在視圖/焦點中。
const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus
可以通過使用取模運算符(%)來解決這個超簡單的任務。如果你對此還不太熟悉，那么Stack Overflow上就有直觀的說明。
以下JS代碼塊顯示了如何使用模運算符來檢查數(shù)字是偶數(shù)還是奇數(shù)。
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false
通過使用.toTimeString()方法并在合適的位置切割字符串，我們就可以從指定的日期中獲取時間，也可以獲取當前時間。
以下JS代碼塊顯示了如何通過toTimeString方法和切割字符串從日期中獲取時間。
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time
使用Math.pow()方法，可以截取數(shù)字小數(shù)點后的固定幾位。
以下JS代碼塊顯示了如何使用Math.Power方法舍入某個小數(shù)點。
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1); // 25.1
toFixed(25.198726354, 2); // 25.19
toFixed(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726
我們可以使用document.activeElement屬性來檢查一個元素當前是否處于焦點。
以下JS代碼塊顯示了如何使用文檔對象上的activeElement屬性檢查元素當前是否處于焦點。
const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus
以下JS代碼塊顯示了如何檢查當前用戶是否支持touch事件。
const touchSupported = () => {
('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// Result: will return true if touch events are supported, false if not
可以使用navigator.platform來檢查當前用戶是否使用Apple設備。
以下JS代碼塊顯示了如何檢查用戶當前是否在Apple設備上。
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device
window.scrollTo()方法通過x坐標和y坐標實現(xiàn)滾動。如果將它們設置為0，則將滾動到頁面頂部。
注意：Internet Explorer不支持.scrollTo()方法。
以下JS代碼塊顯示了如何使用scrollTo方法將瀏覽器滾動至頂部。
const goToTop = () => window.scrollTo(0, 0);
goToTop();
// Result: will scroll the browser to the top of the page
可以使用reduce方法獲取函數(shù)參數(shù)的平均值。
以下JS代碼塊顯示了如何使用reduce方法獲取參數(shù)的平均值。
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5
最后一個2合1了！
處理溫度有時會暈頭轉向。這兩個函數(shù)則能幫助大家將華氏溫度轉換為攝氏溫度，以及將攝氏溫度轉換為華氏溫度。
以下JS代碼塊顯示了如何將華氏溫度轉換為攝氏溫度，以及反向的轉換。
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Examples
celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0喜歡本文，請關注，點贊，收藏哦。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
