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

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

document.lastModified

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

07/29/2019 15:19:41

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

語法

var lastModificationDate = document.lastModified;

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

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

示例1

在下面的程式中，我們使用document.lastModified提取文件的上次修改日期和時間，並將其記錄在HTML正文中。

<!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正文中。

<!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函式，該函式刪除第一個段落，從而將文件的修改時間設定為按下按鈕的時間。

結論

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

更新於：2022年9月21日

5K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.