HTML：使用JavaScript（js）腳本在網頁上顯示實時時間-有解無憂

hello，大家好，我是wangzirui32，今天我們來學習如何在網頁上顯示當前時間，
話不多說，首先創建一個js腳本檔案，命名為timeShow.js，代碼如下（不懂的地方看注釋）：

// 定義time函式
function time(){
    // 創建一個日期物件
    date = new Date();

    // 獲取當前年 需要加上1900
    var year = date.getYear() + 1900;
    // 當前月 需要加上1
    var month = date.getMonth() + 1;
    // 當前日
    var day = date.getDate();

    // 當前星期
    // 說明：getDay回傳一個數字，這個數字就是在下方串列的其中一個索引
    var weekdayList = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var weekday = weekdayList[date.getDay()];
    // 當前時
    var hours = date.getHours();
    // 當前分
    var minutes = date.getMinutes();
    // 當前秒
    var seconds = date.getSeconds();
    
    // 由于字串太長 分為兩段來寫，效果是一樣的
    var write_content = "現在的時間為：" + year + "年" + month + "月" + day + "日" + weekday;
    // 說明：" "是空格，用來隔開星期和小時
    write_content = write_content +  " " + hours + "時" + minutes + "分" + seconds + "秒";
    
    // 將id為timeShow的標簽 文本內容設定為write_content字串的內容
    document.getElementById("timeShow").innerHTML = write_content;
}

// 設定運行間隔 每1000毫秒，也就是1秒運行一次time函式
setInterval(time,1000);

再在同樣的目錄下創建一個HTML檔案，寫入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>顯示HTML時間</title>
  <script src="timeShow.js"></script>
</head>
<body>
  <div id="timeShow"></div>
</body>
</html>

script加載腳本檔案，再創建一個id為timeShow的div標簽，
最后，你也可以重新撰寫js腳本檔案里的代碼，獲取不同格式的時間，比如只獲取月日，只獲取時分秒等，這些大家可以自己去嘗試，這里不再贅述，
打開瀏覽器，你就可以看見實時變動的時間了！
對HTML不了解的建議你去博主的文章HTML網頁標簽代碼基本教學看看，感興趣可以收藏點贊哦！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260069.html

標籤：其他

上一篇：【JavaScript】DOM模型

下一篇：Vue框架——偵聽器