JavaScript實現頁面實時顯示時間

本文轉載自查看原文 2019-09-20 17:59 1572

JavaScript實現頁面實時顯示時間

使用 setInterval() 函數

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式

setInterval("getTime()",1000); 以1000毫秒間隔調用函數有一個問題就是剛打開頁面時的1s會不顯示

為此我們可以在之前先調用一遍函數 getTime();

這樣無論何時都能實時顯示時間啦

.html代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS時間</title>
      
</head>
<body>

    <script src="aa.js"></script>
    
    <div id="getTime" style="float: left;
                             margin-left: 10px;
                             margin-top: 15px;
                             background-color: #aabbcc;">
        <p>
        <script>
            getTime();
            setInterval("getTime()",1000);
        </script>
        </p>
    
    </div>

</body>
</html>

.js代碼如下

function getTime(){
    var Week, Weekday;
    var date =  new Date();
    
    Week = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    Weekday = date.getDay();
    
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    hours = date.getHours();
    minutes = date.getMinutes();
    seconds = date.getSeconds();
    
    document.getElementById("getTime").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + Week[Weekday];

};

效果如下

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript實現頁面實時顯示時間 js頁面實時顯示時間用JS實現實時顯示系統時間 Vue頁面上實時顯示當前時間，每秒更新 Vue頁面上實時顯示當前時間，每秒更新 js(jquery)代碼在頁面上實時地顯示時間 js實現實時顯示當前時間的方法 javascript 實現頁面加載完再顯示頁面 Android顯示實時時間 JS實時顯示系統時間