JavaScript实现页面实时显示时间

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];

};

 

 

效果如下

posted @ 2019-09-20 17:59  s1eepDumpling  阅读(3362)  评论(0)  编辑  收藏  举报