如何使用 JavaScript 顯示文件最後修改的日期和時間？

我們使用document物件的lastModified屬性來顯示使用JavaScript修改文件的日期和時間。此命令將提供修改的確切日期和時間。document 物件是 DOM 的一部分，它將整個 HTML 呈現為物件的層次結構及其屬性，以及儲存網頁的不同屬性。

document.lastModified

它是 document 物件的只讀屬性，返回一個包含文件最後修改日期和時間的字串。格式如下所示

07/29/2019 15:19:41

注意 - lastModified 屬性僅適用於頁面內容沒有動態生成的網頁。

語法

var lastModificationDate = document.lastModified;

我們將從document.lastModified返回的字串儲存在變數 lastModificationDate 中。

讓我們看一個例子來更好地理解。

示例 1

在下面的程式中，我們使用document.lastModified提取文件的最後修改日期和時間，並在 HTML body 中記錄它。

<!DOCTYPE html>
<html>
<body>
   <div id = "result"></div>
   <script>
      var date = document.lastModified;
      document.getElementById("result").innerHTML = "The document was last modified on : " + date;
   </script>
</body>
</html>

什麼算作修改？

Web 伺服器將任何檔案更改視為修改的來源，此資訊來自請求的HTTP 標頭。如果 Web 伺服器無法從 HTTP 標頭檢索修改資訊，則會向文件提供 01/01/1971 12:00:00 的預設日期和時間。

JavaScript 提供與Web 瀏覽器時鐘同步的Date物件。它以更詳細的方式列印日期、時間和時區。例如：

Tue Sep 06 2022 21:33:42 GMT+0530 (India Standard Time)

建立 Date() 物件的方法有很多。我們將使用 Date() 建構函式，其中我們提供日期和時間的字串作為引數以檢索相應的 Date 物件。

語法

var lastModificationDate = new Date(document.lastModified);

我們提供文件的lastModified屬性（它是字串）作為 Date 物件的引數。然後將相應的 Date 物件儲存在lastModificationDate中。

示例 2

在下面的程式中，我們使用document.lastModified提取文件的最後修改日期和時間，並從中建立一個 Date 物件，然後在 HTML body 中記錄它。

<!DOCTYPE html>
<html>
<body>
   <div id = "result"></div>
   <script>
      var date = document.lastModified;
      var lastModifiedDate = new Date(date);
      document.getElementById("result").innerHTML = "The document was last modified on : " + lastModifiedDate;
   </script>
</body>
</html>

我們可以透過刪除元素來修改 HTML 文件。這會更改文件的修改日期，該日期會記錄在螢幕上。

語法

parent.removeChild(child);

這裡，parent 是指我們要刪除其子元素的元素的物件，child 是需要刪除的物件。

但是，在某些情況下，我們可能不知道父元素。在這種情況下，我們可以使用類似以下內容 -

child.parentNode.removeChild(child);

其中，child 是我們要刪除的子元素的物件。請注意，parentNode是用於瞭解元素父級的 js 屬性。

讓我們透過一個示例更好地瞭解這一點 -

示例 3

在下面的程式碼片段中，我們在文件中有兩個段落，其中一個在按下更改按鈕時會被刪除。然後在螢幕上記錄修改日期。

<!DOCTYPE html>
<html>
<body>
   <div id = "result">The modification date of this document can be changed with the below button !
      <p id = "para1"> This is the first paragraph. </p>
      <p id = "para2"> This is the second paragraph. </p>
   </div>
   <button onclick = "change()"> change !</button><br><br>
   <p id = "modificationDate">The document was last modified on :</p>
   <script>
      function change(){
         var dateDiv = document.getElementById("modificationDate");
         var resultDiv = document.getElementById("result");
         var para1 = document.getElementById("para1");
         resultDiv.removeChild(para1);
         var date = document.lastModified;
         dateDiv.innerHTML = date;
      }
   </script>
</body>
</html>

更改按鈕觸發更改JavaScript 函式，該函式刪除第一個段落，從而將文件的修改時間設定為按下按鈕時的時刻。

結論

document 物件的lastModified屬性對於瞭解文件上次更改的時間非常有幫助。但是，該實用程式僅限於靜態頁面，而如今這樣的頁面很少。

更新於: 2022-09-21

5K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.