整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

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

          1. 獲得一個隨機的布爾值(true/false)

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

          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.hiddenh5新增加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知識,使用今天的浮動屬性,可以做一個簡單的導航欄。那么下一篇文章中,小海老師會帶領大家一同利用最近的所學,做一個水平放置的導航欄。效果非常酷炫,希望正在學習前端開發的同學們千萬不要錯過。


          主站蜘蛛池模板: 一区二区三区免费在线视频 | 北岛玲在线一区二区| 成人一区二区三区视频在线观看| 精品久久久久一区二区三区| 另类ts人妖一区二区三区| 亚洲视频一区在线| 国产亚洲福利精品一区| 日本韩国黄色一区二区三区| 国产精品日韩一区二区三区| 无码乱码av天堂一区二区| 久久精品国产一区二区三区肥胖| 日韩精品人妻av一区二区三区| 日韩视频一区二区在线观看| 91精品福利一区二区三区野战| 果冻传媒董小宛一区二区| 国产精品一区二区av不卡| 亚洲日韩国产一区二区三区 | 影院成人区精品一区二区婷婷丽春院影视| 国产AV午夜精品一区二区入口 | 人妻AV一区二区三区精品 | 精品无码一区二区三区在线| 午夜福利av无码一区二区| 中文字幕一区日韩在线视频| 精品福利一区二区三区精品国产第一国产综合精品| 欧美亚洲精品一区二区| 麻豆AV天堂一区二区香蕉| 欧美激情国产精品视频一区二区| 91精品福利一区二区| 九九无码人妻一区二区三区| 好吊妞视频一区二区| 视频一区视频二区日韩专区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 欧洲无码一区二区三区在线观看| 亚洲国产美国国产综合一区二区 | 少妇无码一区二区三区| 精品国产一区AV天美传媒| 久热国产精品视频一区二区三区 | 色老头在线一区二区三区| 影音先锋中文无码一区| 无码国产精品一区二区高潮| 一区二区三区无码高清视频|