13個JavaScript 一行程序，讓你看起來像個

13個JavaScript 一行程序，讓你看起來像個專家

avaScript 可以做很多好玩的事，從復雜的框架到處理API，有太多的東西需要學習。但是，它也能讓我們只用一行就能做一些了不起的事情。

1. 獲得一個隨機的布爾值（true/false）

該函數使用Math.random()方法返回一個布爾值（true 或者 false）。Math.random創建一個0到1之間的隨機數，我們只要檢查它是否高于或低于0.5，就有50%機會得到true或false。

const randomBoolean=()=> Math.random() >=0.5;
console.log(randomBoolean());

2. 檢查所提供的日期是否為工作日

使用這種方法，我們能夠檢查在函數中提供的日期是否是工作日或周末的日子。

const isWeekday=(date)=> date.getDay() % 6 !==0;

console.log(isWeekday(new Date(2021, 7, 6)));
// true  因為是周五

console.log(isWeekday(new Date(2021, 7, 7)));
// false 因為是周六

3.反轉字符串

有幾種不同的方法來反轉一個字符串。這是最簡單的一種，使用split()、reverse()和join()方法。

const reverse=str=> str.split('').reverse().join('');
reverse('hello world');     
// 'dlrow olleh'

4.檢查當前標簽是否隱藏

Document.hidden （只讀屬性）返回布爾值，表示頁面是（true）否（false）隱藏。

const isBrowserTabInView=()=> document.hidden;
isBrowserTabInView();

場外：無意間發現愛奇藝廣告播放時間居然是在當前標簽頁激活的時候才會進行倒計時，離開當前標簽頁的時候，倒計時停止，百度一下發現document.hidden這個東東。

document.hidden是h5新增加api使用的時候有兼容性問題。

var hidden
if (typeof document.hidden !=="undefined") {
    hidden="hidden";
} else if (typeof document.mozHidden !=="undefined") {
    hidden="mozHidden";
} else if (typeof document.msHidden !=="undefined") {
    hidden="msHidden";
} else if (typeof document.webkitHidden !=="undefined") {
    hidden="webkitHidden";
}
console.log("當前頁面是否被隱藏：" + document[hidden])

5. 檢查一個數字是偶數還是奇數

const isEven=num=> num % 2===0;
console.log(isEven(2));
// true
console.log(isEven(3));
// false

6. 從一個日期獲取時間

const timeFromDate=date=> date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// "17:30:00"

console.log(timeFromDate(new Date()));
// 打印當前的時間

7. 保留 n 位小數

const toFixed=(n, fixed)=> ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// 事例
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

8. 檢查當前是否有元素處于焦點中

我們可以使用document.activeElement屬性檢查一個元素是否當前處于焦點。

const elementIsInFocus=(el)=> (el===document.activeElement);
elementIsInFocus(anyElement)
// 如果在焦點中返回true，如果不在焦點中返回 false

9. 檢查當前瀏覽器是否支持觸摸事件

const touchSupported=()=> {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// 如果支持觸摸事件，將返回true，如果不支持則返回false。

10. 檢查當前瀏覽器是否在蘋果設備上

const isAppleDevice=/Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);

11. 滾動到頁面頂部

const goToTop=()=> window.scrollTo(0, 0);
goToTop();

12. 獲取參數的平均數值

const average=(...args)=> args.reduce((a, b)=> a + b) / args.length;
average(1, 2, 3, 4);
// 2.5

13.華氏/攝氏轉換

const celsiusToFahrenheit=(celsius)=> celsius * 9/5 + 32;
const fahrenheitToCelsius=(fahrenheit)=> (fahrenheit - 32) * 5/9;
// 事例
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

~完，我是刷碗智，會所按摩走起！

作者：Shadeed 譯者：前端小智來源：medium 原文：https://medium.com/dailyjs/13-javascript-one-liners-thatll-make-you-look-like-a-pro-29a27b6f51cb

挑戰30天在頭條寫日記#

HTML是一種用于創建網頁結構和內容的標記語言，其中包含了許多標簽，可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法，并通過示例展示如何創建表格。

1. <tr>標簽的作用： <tr>標簽代表HTML表格中的一行（行數據），它可以包含一個或多個<td>元素作為單元格。

2. <td>標簽的作用： <td>標簽用于定義表格中的一個單元格（列數據），可以包含文本、圖像、鏈接等內容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標簽時，首先需要創建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標簽，如下所示：

htmlCopy code<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設置邊框、背景顏色等。以下是一個簡單的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例應用： 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>廣州</td>
  </tr>
</table>

</body>
</html>

6. 書籍參考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 總結： 通過本文的介紹，我們了解了HTML中<tr>和<td>標簽的基本用法，以及如何創建簡單的表格和添加樣式。使用這些標簽，我們可以輕松地創建具有結構和內容的網頁表格，提升頁面的可讀性和可視性。

頁面布局中，有兩個非常常用的CSS屬性。它們巧妙的控制著塊級元素們之間的位置，靈活的讓塊級元素在一行內顯示或者另起一行。說到這里，相信大家已經猜出來了，這兩個屬性就是控制塊級元素浮動的屬性。整個頁面布局過程中，浮動屬性的使用頻率是最高的。今天，小海老師就來帶領大家一同認識這兩個神奇的CSS屬性。

承接文章：發揮個人的優勢，踏踏實實的學習前端開發，小海為你傳授學習心得

技術等級：初級 | 適合前端開發的初學者閱讀學習。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

一、浮動屬性：

CSS技術使用float屬性來實現塊級元素的浮動效果。

CSS技術使用float屬性實現浮動效果

該屬性可以有下列取值：

left，控制塊級元素左浮動。
right，控制塊級元素右浮動。

屬性說明：我們都知道，塊級元素之間默認情況下是獨占一行的。也就是說，兩個在代碼中緊密相連的塊級元素，它們的擺放位置是一個在上一行，另一個在下一行。盡管通過width和height屬性為塊級元素設置了大小，使得塊級元素無法占滿整個行，但是塊級元素右側空余的位置仍然不允許出現任何內容。

讓我們一同來看下列實例：

HTML代碼如下所示：

<div id=”box01”></box>
<div id=”box02”></box>

CSS代碼如下所示：

#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}

上述代碼的運行結果如下圖所示，這張圖為我們展示了兩個塊級元素默認的位置擺放。

展示兩個塊級元素的默認位置

如果我想讓兩個塊級元素在一行內顯示該如何實現呢？這就需要float屬性登場了。

將#box01的CSS代碼中添加如下屬性：float:left，會發生什么情況呢？同學們實踐操作一下，我們會發現，屏幕中就只剩下紅色的塊級元素了。那藍色的#box02去哪里了呢？其實#box02響應了#box01浮動的號召，和#box01一同出現在同一行了，只是被壓在了紅色的#box01的下面。

解決方法就是讓藍色的#box02也添加上 float:left的屬性。這樣，兩個塊級元素就可以共同出現在一行了。下圖為我們展示了這樣的效果。

展示兩個塊級元素的左浮動位置

下面讓我們再看一個實例，這個實例中我們為兩個塊級元素添加一個容器。

HTML代碼如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

我們設置容器#box的寬度為400px。內部的兩個塊級元素：.boxLeft的寬度設置為150px；.boxRight的寬度設置為100px。要求讓這兩個內部的塊級元素在一行內顯示，并且分布到容器的兩端。

CSS代碼如下所示：

#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}

我們可以看到，在.boxRight對象上，我們添加了float:right的CSS屬性，讓這個塊級元素發生了右浮動，則該元素跑到了容器的最右側。下圖為我們展示了這樣的效果。

展示兩個塊級元素的左右浮動位置

浮動屬性的使用結論：

若希望多個塊級元素在一行內顯示，則這幾個塊級元素都要具備float浮動屬性。

二、清除浮動屬性：

CSS技術使用clear屬性來實現塊級元素的清除浮動效果。

CSS技術使用clear屬性設置清除浮動效果

該屬性可以有下列取值：

left，清除塊級元素的左浮動效果。
right，清除塊級元素的右浮動效果。
both，清除塊級元素的兩端浮動效果。

屬性說明：根據上面的float屬性的使用，我們可想而知，一個緊跟在具有浮動屬性的塊級元素后面的塊級元素，即使它不想和它前面的塊級元素在一行內顯示，也會受到前面塊級元素浮動屬性的影響，被壓在前面塊級元素的下方。

解決這個問題，可以對不希望和前面塊級元素在同一行顯示的塊級元素使用清除浮動屬性。

下面讓我們來看這個實例：

HTML代碼如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

CSS代碼如下所示（#box .boxRIght）：

#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}

因為.boxRight具備clear:left屬性，所以即使.boxLeft使用了float:left屬性，它們也仍舊分布在兩行，不會在同一行顯示。就好像沒有過使用任何浮動效果似的。

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

結合前面所學的CSS知識，使用今天的浮動屬性，可以做一個簡單的導航欄。那么下一篇文章中，小海老師會帶領大家一同利用最近的所學，做一個水平放置的導航欄。效果非常酷炫，希望正在學習前端開發的同學們千萬不要錯過。

在線咨詢

上一篇：2015打造火爆H5頁面全攻略！
下一篇：簡單實用：web前端實現網頁主題切換功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

13個JavaScript 一行程序，讓你看起來像個

1. 獲得一個隨機的布爾值（true/false）

2. 檢查所提供的日期是否為工作日

3.反轉字符串

4.檢查當前標簽是否隱藏

5. 檢查一個數字是偶數還是奇數

6. 從一個日期獲取時間

7. 保留 n 位小數

8. 檢查當前是否有元素處于焦點中

9. 檢查當前瀏覽器是否支持觸摸事件

10. 檢查當前瀏覽器是否在蘋果設備上

11. 滾動到頁面頂部

12. 獲取參數的平均數值

13.華氏/攝氏轉換

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

小海教材

小海聲明

文章預告

您的項目需求