整合營銷服務商

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

          免費咨詢熱線:

          JS 鼠標框選(頁面選擇)時返回對應的 HTML 或文本內容

          S 鼠標框選(頁面選擇)時返回對應的 HTML 或文案內容

          一、需求背景

          1、項目需求

          當用戶進行鼠標框選選擇了頁面上的內容時,把選擇的內容進行上報。

          2、需求解析

          雖然這需求就一句話的事,但是很顯然,沒那么簡單...

          因為鼠標框選說起來簡單,就是選擇的內容,但是這包含很多中情況,比如:只選擇文案、選擇圖片、選擇輸入框、輸入框中的內容選擇、iframe、等。

          簡單總結,分為以下幾點:

          1. 選擇文案時
          2. 選擇圖片、svg、iframe、video、audio 等標簽時
          3. 選擇 input、select、textarea 等標簽時
          4. 選擇 input、textarea 標簽內容時
          5. 選擇類似 字符時
          6. 鍵盤全選時
          7. 鼠標右鍵選擇
          8. 以上各模塊結合時
          9. 當包含標簽的時候,返回 html 結構,只有文本時返回文本內容

          二、技術要點

          鼠標框選包含以下幾點:

          1. debounce 防抖
          2. addEventListener 事件監聽
          3. Range 對象
          4. Selection 對象

          1、debounce

          老生常談的技術點了,這里不能用節流,因為肯定不能你鼠標選擇的時候,隔一段時間返回一段內容,肯定是選擇之后一起返回。

          這里用 debounce 主要也是用在事件監聽和事件處理上。

          • 【debounce 掘金】
          • 【debounce CSDN】

          2、addEventListener

          事件監聽,因為鼠標選擇,不僅僅是鼠標按下到鼠標抬起,還包括雙擊、右鍵、全選。

          需要使用事件監聽對事件作處理。

          • 【addEventListener MDN】

          3、Range

          Range 接口表示一個包含節點與文本節點的一部分的文檔片段。

          Range 是瀏覽器原生的對象。

          3.1. 創建 Range 實例,并設置起始位置

          <body>
            <ul>
              <li>Vite</li>
              <li>Vue</li>
              <li>React</li>
              <li>VitePress</li>
              <li>NaiveUI</li>
            </ul>
          </body>
          <script>
            // 創建 Range 對象
            const range = new Range()
            const liDoms = document.querySelectorAll("li");
            // Range 起始位置在 li 2
            range.setStartBefore(liDoms[1]);
            // Range 結束位置在 li 3
            range.setEndAfter(liDoms[2]);
            // 獲取 selection 對象
            const selection = window.getSelection();
            // 添加光標選擇的范圍
            selection.addRange(range);
          </script>


          可以看到,選擇內容為第二行和第三行

          3.1.1 瀏覽器兼容情況


          3.2. Range 屬性

          1. startContainer:起始節點。
          2. startOffset:起始節點偏移量。
          3. endContainer:結束節點。
          4. endOffset:結束節點偏移量。
          5. collapsed:范圍的開始和結束是否為同一點。
          6. commonAncestorContainer:返回完整包含 startContainer 和 endContainer 的最深一級的節點。

          3.2.1. 用我們上面創建的實例來看下 range 屬性的值


          3.2.2. 如果我們只選擇文本內容時

          只選擇 li 中的 itePres


          可以看出 range 屬性對應的值


          3.3. Range 方法

          1. cloneContents():復制范圍內容,并將復制的內容作為 DocumentFragment 返回。
          2. cloneRange():創建一個具有相同起點/終點的新范圍, 非引用,可以隨意改變,不會影響另一方。
          3. collapse(toStart):如果 toStart=true 則設置 end=start,否則設置 start=end,從而折疊范圍。
          4. compareBoundaryPoints(how, sourceRange):兩個范圍邊界點進行比較,返回一個數字 -1、0、1。
          5. comparePoint(referenceNode, offset):返回-1、0、1具體取決于 是 referenceNode 在 之前、相同還是之后。
          6. createContextualFragment(tagString):返回一個 DocumentFragment。
          7. deleteContents():刪除框選的內容。
          8. extractContents():從文檔中刪除范圍內容,并將刪除的內容作為 DocumentFragment 返回。
          9. getBoundingClientRect():和 dom 一樣,返回 DOMRect 對象。
          10. getClientRects():返回可迭代的對象序列 DOMRect。
          11. insertNode(node):在范圍的起始處將 node 插入文檔。
          12. intersectsNode(referenceNode):判斷與給定的 node 是否相交。
          13. selectNode(node):設置范圍以選擇整個 node。
          14. selectNodeContents(node):設置范圍以選擇整個 node 的內容。
          15. setStart(startNode, startOffset):設置起點。
          16. setEnd(endNode, endOffset):設置終點。
          17. setStartBefore(node):將起點設置在 node 前面。
          18. setStartAfter(node):將起點設置在 node 后面。
          19. setEndBefore(node):將終點設置為 node 前面。
          20. setEndAfter(node):將終點設置為 node 后面。
          21. surroundContents(node):使用 node 將所選范圍內容包裹起來。

          3.4. 創建 Range 的方法

          3.4.1. Document.createRange

          const range = document.createRange();

          3.4.2. Selection 的 getRangeAt() 方法

          const range = window.getSelection().getRangeAt(0)

          3.4.3. caretRangeFromPoint() 方法

          if (document.caretRangeFromPoint) {
              range = document.caretRangeFromPoint(e.clientX, e.clientY);
          }

          3.4.4. Range() 構造函數

          const range = new Range()

          3.5. Range 兼容性


          4、Selection

          Selection 對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區,可能橫跨多個元素。

          4.1. 獲取文本對象

          window.getSelection()



          4.2. Selection 術語

          4.2.1. 錨點 (anchor)

          錨指的是一個選區的起始點(不同于 HTML 中的錨點鏈接)。當我們使用鼠標框選一個區域的時候,錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時,錨點是不會變的。

          4.2.2. 焦點 (focus)

          選區的焦點是該選區的終點,當你用鼠標框選一個選區的時候,焦點是你的鼠標松開瞬間所記錄的那個點。隨著用戶拖動鼠標,焦點的位置會隨著改變。

          4.2.3. 范圍 (range)

          范圍指的是文檔中連續的一部分。一個范圍包括整個節點,也可以包含節點的一部分,例如文本節點的一部分。用戶通常下只能選擇一個范圍,但是有的時候用戶也有可能選擇多個范圍。

          4.2.4. 可編輯元素 (editing host)

          一個用戶可編輯的元素(例如一個使用 contenteditable 的 HTML 元素,或是在啟用了 designMode 的 Document 的子元素)。

          4.3. Selection 的屬性

          首先要清楚,選擇的起點稱為錨點(anchor),終點稱為焦點(focus)。

          1. anchorNode:選擇的起始節點。
          2. anchorOffset:選擇開始的 anchorNode 中的偏移量。
          3. focusNode:選擇的結束節點。
          4. focusOffset:選擇開始處 focusNode 的偏移量。
          5. isCollapsed:如果未選擇任何內容(空范圍)或不存在,則為 true。
          6. rangeCount:選擇中的范圍數,之前說過,除 Firefox 外,其他瀏覽器最多為1。
          7. type:類型:None、Caret、Range

          4.4. Selection 方法

          1. addRange(range): 將一個 Range 對象添加到當前選區。
          2. collapse(node, offset): 將選區折疊到指定的節點和偏移位置。
          3. collapseToEnd(): 將選區折疊到當前選區的末尾。
          4. collapseToStart(): 將選區折疊到當前選區的起始位置。
          5. containsNode(node, partlyContained): 判斷選區是否包含指定的節點,可以選擇是否部分包含。
          6. deleteFromDocument(): 從文檔中刪除選區內容。
          7. empty(): 從選區中移除所有范圍(同 `removeAllRanges()``,已廢棄)。
          8. extend(node, offset): 將選區的焦點節點擴展到指定的節點和偏移位置。
          9. getRangeAt(index): 返回選區中指定索引處的 Range 對象。
          10. removeAllRanges(): 移除所有選區中的范圍。
          11. removeRange(range): 從選區中移除指定的 Range 對象。
          12. selectAllChildren(node): 選中指定節點的所有子節點。
          13. setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 設置選區的起始和結束節點及偏移位置。
          14. setPosition(node, offset):collapse 的別名

          4.5. Selection 兼容性


          三、項目實現

          1、實現思路

          1. 先獲取選擇的內容,開發 getSelectContent 函數
          2. 對獲取的內容進行判斷,是否存在 selection 實例,沒有直接返回 null
          3. 判斷 selection 實例的 isCollapsed 屬性 沒有選中,對 selection 進行 toString().trim() 操作,判斷內容 有內容,直接返回 text 類型 無內容,返回 null 有選中,則判斷內容
          4. 判斷選中的內容有沒有節點 沒有節點,則和沒有選中一樣處理,進行 toString().trim() 操作,判斷內容 有內容,直接返回 text 類型 無內容,返回 null 有節點,進行 toString().trim() 操作,判斷內容 沒有內容,判斷是否有特殊節點 有 'iframe', 'svg', 'img', 'audio', 'video' 節點,返回 html 類型 有 'input', 'textarea', 'select',判斷 value 值,是否存在 存在:返回 html 類型 不存在:返回 null 沒有特殊節點,返回 null 有內容,返回 html 類型
          5. 對鼠標 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件進行監聽,觸發 getSelectContent 函數
          6. 在需要的地方進行 debounce 防抖處理

          2、簡易流程圖


          2、Debounce 方法實現

          2.1. JS

          function debounce (fn, time = 500) {
            let timeout = null; // 創建一個標記用來存放定時器的返回值
            return function () {
              clearTimeout(timeout) // 每當觸發時,把前一個 定時器 clear 掉
              timeout = setTimeout(() => { // 創建一個新的 定時器,并賦值給 timeout
                fn.apply(this, arguments)
              }, time)
            }
          }

          2.2. TS

          /**
           * debounce 函數類型
           */
          type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
          /**
           * debounce 防抖函數
           * @param {Function} func 函數
           * @param {number} wait 等待時間
           * @param {false} immediate 是否立即執行
           * @returns {DebouncedFunction}
           */
          function debounce<F extends (...args: any[]) => any>(
            func: F,
            wait = 500,
            immediate = false
          ): DebouncedFunction<F> {
            let timeout: ReturnType<typeof setTimeout> | null
            return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
              // eslint-disable-next-line @typescript-eslint/no-this-alias
              const context = this
              const later = function () {
                timeout = null
                if (!immediate) {
                  func.apply(context, args)
                }
              }
              const callNow = immediate && !timeout
              if (timeout) {
                clearTimeout(timeout)
              }
              timeout = setTimeout(later, wait)
              if (callNow) {
                func.apply(context, args)
              }
            }
          }

          3、獲取選擇的文本/html 元素

          3.1. 獲取文本/html 元素

          nterface IGetSelectContentProps {
            type: 'html' | 'text'
            content: string
          }
          /**
           * 獲取選擇的內容
           * @returns {null | IGetSelectContentProps} 返回選擇的內容
           */
          const getSelectContent = (): null | IGetSelectContentProps => {
            const selection = window.getSelection()
            if (selection) {
              // 1. 是焦點在 input 輸入框
              // 2. 沒有選中
              // 3. 選擇的是輸入框
              if (selection.isCollapsed) {
                return selection.toString().trim().length
                  ? {
                      type: 'text',
                      content: selection.toString().trim()
                    }
                  : null
              }
              // 獲取選擇范圍
              const range = selection.getRangeAt(0)
              // 獲取選擇內容
              const rangeClone = range.cloneContents()
              // 判斷選擇內容里面有沒有節點
              if (rangeClone.childElementCount > 0) {
                // 創建 div 標簽
                const container = document.createElement('div')
                // div 標簽 append 復制節點
                container.appendChild(rangeClone)
                // 如果復制的內容長度為 0
                if (!selection.toString().trim().length) {
                  // 判斷是否有選擇特殊節點
                  const isSpNode = hasSpNode(container)
                  return isSpNode
                    ? {
                        type: 'html',
                        content: container.innerHTML
                      }
                    : null
                }
                return {
                  type: 'html',
                  content: container.innerHTML
                }
              } else {
                return selection.toString().trim().length
                  ? {
                      type: 'text',
                      content: selection.toString().trim()
                    }
                  : null
              }
            } else {
              return null
            }
          }
          /**
           * 判斷是否包含特殊元素
           * @param {Element} parent 父元素
           * @returns {boolean} 是否包含特殊元素
           */
          const hasSpNode = (parent: Element): boolean => {
            const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
            const inpList = ['input', 'textarea', 'select']
            return Array.from(parent.children).some((node) => {
              if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
              if (
                inpList.includes(node.nodeName.toLocaleLowerCase()) &&
                (node as HTMLInputElement).value.trim().length
              )
                return true
              if (node.children) {
                return hasSpNode(node)
              }
              return false
            })
          }

          3.2. 只需要文本

          /**
           * 獲取框選的文案內容
           * @returns {string} 返回框選的內容
           */
          const getSelectTextContent = (): string => {
            const selection = window.getSelection()
            return selection?.toString().trim() || ''
          }

          4、添加事件監聽

          // 是否時鼠標點擊動作
          let selectionchangeMouseTrack: boolean = false
          const selectionChangeFun = debounce(() => {
            const selectContent = getSelectContent()
            console.log('selectContent', selectContent)
            // todo... 處理上報
            selectionchangeMouseTrack = false
          })
          // 添加 mousedown 監聽事件
          document.addEventListener('mousedown', () => {
            selectionchangeMouseTrack = true
          })
          // 添加 mouseup 監聽事件
          document.addEventListener(
            'mouseup',
            debounce(() => {
              selectionChangeFun()
            }, 100)
          )
          // 添加 selectionchange 監聽事件
          document.addEventListener(
            'selectionchange',
            debounce(() => {
              if (selectionchangeMouseTrack) return
              selectionChangeFun()
            })
          )
          // 添加 dblclick 監聽事件
          document.addEventListener('dblclick', () => {
            selectionChangeFun()
          })
          // 添加 contextmenu 監聽事件
          document.addEventListener(
            'contextmenu',
            debounce(() => {
              selectionChangeFun()
            })
          )

          也可以進行封裝

          /**
           * addEventlistener function 類型
           */
          export interface IEventHandlerProps {
            [eventName: string]: EventListenerOrEventListenerObject
          }
          
          let selectionchangeMouseTrack: boolean = false
          const eventHandlers: IEventHandlerProps = {
            // 鼠標 down 事件
            mousedown: () => {
              selectionchangeMouseTrack = true
            },
            // 鼠標 up 事件
            mouseup: debounce(() => selectionChangeFun(), 100),
            // 選擇事件
            selectionchange:  debounce(() => {
              if (selectionchangeMouseTrack) return
              selectionChangeFun()
            }),
            // 雙擊事件
            dblclick: () => selectionChangeFun(),
            // 右鍵事件
            contextmenu: debounce(() => selectionChangeFun())
          }
          Object.keys(eventHandlers).forEach((event) => {
            document.addEventListener(event, eventHandlers[event])
          })

          5、返回內容

          5.1. 純文本內容


          5.2. html 格式


          6. 完整 JS 代碼

          function debounce (fn, time = 500) {
            let timeout = null; // 創建一個標記用來存放定時器的返回值
            return function () {
              clearTimeout(timeout) // 每當觸發時,把前一個 定時器 clear 掉
              timeout = setTimeout(() => { // 創建一個新的 定時器,并賦值給 timeout
                fn.apply(this, arguments)
              }, time)
            }
          }
          
          let selectionchangeMouseTrack = false
          document.addEventListener('mousedown', (e) => {
            selectionchangeMouseTrack = true
            console.log('mousedown', e)
          })
          document.addEventListener('mouseup', debounce((e) => {
            console.log('mouseup', e)
            selectionChangeFun()
          }, 100))
          document.addEventListener('selectionchange', debounce((e) => {
            console.log('selectionchange', e)
            if (selectionchangeMouseTrack) return
            selectionChangeFun()
          }))
          document.addEventListener('dblclick', (e) => {
            console.log('dblclick', e)
            selectionChangeFun()
          })
          document.addEventListener('contextmenu',debounce(() => {
            selectionChangeFun()
          }))
          
          const selectionChangeFun = debounce(() => {
            const selectContent = getSelectContent()
            selectionchangeMouseTrack = false
            console.log('selectContent', selectContent)
          })
          
          const getSelectContent = () => {
            const selection = window.getSelection();
            if (selection) {
              // 1. 是焦點在 input 輸入框
              // 2. 沒有選中
              // 3. 選擇的是輸入框
              if (selection.isCollapsed) {
                return selection.toString().trim().length ? {
                  type: 'text',
                  content: selection.toString().trim()
                } : null
              }
              // 獲取選擇范圍
              const range = selection.getRangeAt(0);
              // 獲取選擇內容
              const rangeClone = range.cloneContents()
              // 判斷選擇內容里面有沒有節點
              if (rangeClone.childElementCount > 0) {
                const container = document.createElement('div');
                container.appendChild(rangeClone);
                if (!selection.toString().trim().length) {
                  const hasSpNode = getSpNode(container)
                  return hasSpNode ? {
                    type: 'html',
                    content: container.innerHTML
                  } : null
                }
                return {
                  type: 'html',
                  content: container.innerHTML
                }
              } else {
                return selection.toString().trim().length ? {
                  type: 'text',
                  content: selection.toString().trim()
                } : null
              }
            } else {
              return null
            }
          }
          
          const getSpNode = (parent) => {
            const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
            const inpList = ['input', 'textarea', 'select']
            return Array.from(parent.children).some((node) => {
              if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
              if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
              if (node.children) {
                return getSpNode(node)
              }
              return false
            })
          }

          四、總結

          1. 鼠標框選上報能監控用戶在頁面的行為,能為后續的數據分析等提供便利
          2. 基于 JS 中的 Selection 和 Range 實現的,使用原生 JS
          3. 涉及到的操作比較多,包含鍵盤、鼠標右鍵、全選等
          4. 能對框選的內容進行分類,區別 html 和 text,更方便的看出用戶選擇了哪些內容



          在前面

          今年國慶假期終于可以憋在家里了不用出門了,不用出去看后腦了,真的是一種享受。這么好的光陰怎么浪費,睡覺、吃飯、打豆豆這怎么可能(耍多了也煩),完全不符合我們程序員的作風,趕緊起來把文章寫完。

          這篇文章比較基礎,在國慶期間的業余時間寫的,這幾天又完善了下,力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

          自測讀不讀

          以下是本文所涉及到的知識點,break or continue ?

          • 文件上傳原理
          • 最原始的文件上傳
          • 使用 koa2 作為服務端寫一個文件上傳接口
          • 單文件上傳和上傳進度
          • 多文件上傳和上傳進度
          • 拖拽上傳
          • 剪貼板上傳
          • 大文件上傳之分片上傳
          • 大文件上傳之斷點續傳
          • node 端文件上傳

          原理概述

          原理很簡單,就是根據 http 協議的規范和定義,完成請求消息體的封裝和消息體的解析,然后將二進制內容保存到文件。

          我們都知道如果要上傳一個文件,需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

          那么multipart/form-data表示什么呢?

          multipart互聯網上的混合資源,就是資源由多種元素組成,form-data表示可以使用HTML Forms 和 POST 方法上傳文件,具體的定義可以參考RFC 7578。

          multipart/form-data 結構

          看下 http 請求的消息體



          • 請求頭:

          Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件,其中boundary表示分隔符,如果要上傳多個表單項,就要使用boundary分割,每個表單項由———XXX開始,以———XXX結尾。

          • 消息體- Form Data 部分

          每一個表單項又由Content-Type和Content-Disposition組成。

          Content-Disposition: form-data 為固定值,表示一個表單元素,name 表示表單元素的 名稱,回車換行后面就是name的值,如果是上傳文件就是文件的二進制內容。

          Content-Type:表示當前的內容的 MIME 類型,是圖片還是文本還是二進制數據。

          解析

          客戶端發送請求到服務器后,服務器會收到請求的消息體,然后對消息體進行解析,解析出哪是普通表單哪些是附件。

          可能大家馬上能想到通過正則或者字符串處理分割出內容,不過這樣是行不通的,二進制buffer轉化為string,對字符串進行截取后,其索引和字符串是不一致的,所以結果就不會正確,除非上傳的就是字符串。

          不過一般情況下不需要自行解析,目前已經有很成熟的三方庫可以使用。

          至于如何解析,這個也會占用很大篇幅,后面的文章在詳細說。

          最原始的文件上傳

          使用 form 表單上傳文件

          在 ie時代,如果實現一個無刷新的文件上傳那可是費老勁了,大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定,在那個時代 ie 就是最好用的瀏覽器(別無選擇)。

          DEMO



          這種方式上傳文件,不需要 js ,而且沒有兼容問題,所有瀏覽器都支持,就是體驗很差,導致頁面刷新,頁面其他數據丟失。

          HTML

           <form method="post" action="http://localhost:8100" enctype="multipart/form-data">
          
                  選擇文件:
                      <input type="file" name="f1"/> input 必須設置 name 屬性,否則數據無法發送<br/>
          <br/>
                      標題:<input type="text" name="title"/><br/><br/><br/>
          
                  <button type="submit" id="btn-0">上 傳</button>
          
          </form>
          
          復制代碼

          文件上傳接口

          服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

          在項目開發中,文件上傳本身和業務無關,代碼基本上都可通用。

          在這里我們使用koa-body庫來實現解析和文件的保存。

          koa-body 會自動保存文件到系統臨時目錄下,也可以指定保存的文件路徑。



          然后在后續中間件內得到已保存的文件的信息,再做二次處理。

          • ctx.request.files.f1 得到文件信息,f1為input file 標簽的 name
          • 獲得文件的擴展名,重命名文件

          NODE

          /**
           * 服務入口
           */
          var http = require('http');
          var koaStatic = require('koa-static');
          var path = require('path');
          var koaBody = require('koa-body');//文件保存庫
          var fs = require('fs');
          var Koa = require('koa2');
          
          var app = new Koa();
          var port = process.env.PORT || '8100';
          
          var uploadHost= `http://localhost:${port}/uploads/`;
          
          app.use(koaBody({
              formidable: {
                  //設置文件的默認保存目錄,不設置則保存在系統臨時目錄下  os
                  uploadDir: path.resolve(__dirname, '../static/uploads')
              },
              multipart: true // 開啟文件上傳,默認是關閉
          }));
          
          //開啟靜態文件訪問
          app.use(koaStatic(
              path.resolve(__dirname, '../static') 
          ));
          
          //文件二次處理,修改名稱
          app.use((ctx) => {
              var file = ctx.request.files.f1;//得道文件對象
              var path = file.path;
              var fname = file.name;//原文件名稱
              var nextPath = path+fname;
              if(file.size>0 && path){
                  //得到擴展名
                  var extArr = fname.split('.');
                  var ext = extArr[extArr.length-1];
                  var nextPath = path+'.'+ext;
                  //重命名文件
                  fs.renameSync(path, nextPath);
              }
              //以 json 形式輸出上傳文件地址
              ctx.body = `{
                  "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
              }`;
          });
          
          /**
           * http server
           */
          var server = http.createServer(app.callback());
          server.listen(port);
          console.log('demo1 server start ......   ');
          復制代碼

          CODE

          https://github.com/Bigerfe/fe-learn-code/

          期獲取方法

          獲取方法用于獲取日期的某個部分(來自日期對象的信息)。下面是最常用的方法(以字母順序排序):

          getTime() 方法

          getTime() 方法返回自 1970 年 1 月 1 日以來的毫秒數:

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript getTime()</h2>
          <p>JavaScript 中的內部時鐘從 1970 年 1 月 1 日午夜開始計算。</p>
          <p>getTime() 函數返回從那時起的毫秒數:</p>
          <p id="demo"></p>
          <script>
          var d = new Date();
          document.getElementById("demo").innerHTML = d.getTime();
          </script>
          </body>
          </html>


          getFullYear() 方法

          getFullYear() 方法以四位數字形式返回日期年份

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript getFullYear()</h2>
          <p>getFullYear() 方法返回日期的完整年:</p>
          <p id="demo"></p>
          <script>
          var d = new Date();
          document.getElementById("demo").innerHTML = d.getFullYear();
          </script>
          </body>
          </html>

          getMonth() 方法

          getMonth() 以數字(0-11)返回日期的月份:

          在 JavaScript 中,第一個月(1 月)是月號 0,因此 12 月返回月號 11。

          您可以使用名稱數組,并使用 getMonth() 將月份作為名稱返回:

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript getMonth()</h2>
          <p>getMonth()方法以 0 到 11 之間的數字返回日期的月份。</p>
          <p>要獲得正確的月份,您必須添加 1:</p>
          <p id="demo"></p>
          <script>
          var d = new Date();
          document.getElementById("demo").innerHTML = d.getMonth() + 1;
          </script>
          </body>
          </html>

          getDate() 方法

          getDate() 方法以數字(1-31)返回日期的日:

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript getDate()</h2>
          <p>getDate() 方法以數字(1-31)返回日期的日:</p>
          <p id="demo"></p>
          <script>
          var d = new Date();
          document.getElementById("demo").innerHTML = d.getDate();
          </script>
          </body>
          </html>

          getHours() 方法

          getHours() 方法以數字(0-23)返回日期的小時數:

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript getHours()</h2>
          <p>getHours() 方法以數字(0-23)返回日期的小時:</p>
          <p id="demo"></p>
          <script>
          var d = new Date();
          document.getElementById("demo").innerHTML = d.getHours();
          </script>
          </body>
          </html>

          getDay() 方法

          getDay() 方法以數字(0-6)返回日期的星期名(weekday):

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript getDay()</h2>
          <p>getDay() 方法將周名作為數字返回:</p>
          <p id="demo"></p>
          <script>
          var d = new Date();
          document.getElementById("demo").innerHTML = d.getDay();
          </script>
          </body>
          </html>

          在 JavaScript 中,一周的第一天(0)表示“星期日”,即使世界上的一些國家認為的第一天是“星期一”。

          您可以使用名稱數組,并使用 getDay() 將星期名作為名稱返回:


          主站蜘蛛池模板: 日韩社区一区二区三区| 久久高清一区二区三区| 高清一区二区三区| 久久久久女教师免费一区| 无码一区二区三区免费| 亚洲av片一区二区三区| 国产成人欧美一区二区三区 | 日韩精品区一区二区三VR| 痴汉中文字幕视频一区| 99偷拍视频精品一区二区| 精品无人区一区二区三区在线| 精品国产一区二区三区久久蜜臀| 国产精品亚洲一区二区三区在线观看| 日韩精品无码一区二区三区| 中文字幕色AV一区二区三区| 国产美女视频一区| 国产成人精品久久一区二区三区av| 在线视频精品一区| 在线观看国产一区亚洲bd| 国产精品成人免费一区二区| 国产一区二区三区小说| 亚洲日韩AV无码一区二区三区人| 麻豆一区二区在我观看| 亚洲高清美女一区二区三区| 亚洲一区二区在线免费观看| 久久精品午夜一区二区福利 | 精品日产一区二区三区手机| 久久综合一区二区无码| 国产高清精品一区| 亚洲一区日韩高清中文字幕亚洲| 搜日本一区二区三区免费高清视频| 国产一区二区三区露脸| 欧洲精品码一区二区三区免费看| 美女福利视频一区二区| 亚洲一区日韩高清中文字幕亚洲| 一区二区精品久久| 久久精品免费一区二区三区| 日韩精品无码一区二区中文字幕 | 一区二区三区高清在线 | 少妇精品久久久一区二区三区| 亚洲一区中文字幕久久|