JavaScript实现页面实时显示时间

Posted s1eepDumpling

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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];

};

 

 

效果如下

以上是关于JavaScript实现页面实时显示时间的主要内容，如果未能解决你的问题，请参考以下文章

使用JavaScript在页面上显示JSON

怎么使用 JavaScript 将网站后台的数据变化实时更新到前端

JavaScript 实现鼠标移动时实时获取其相对盒子的偏移

永远观察实时数据的片段

如何在 Resharper IntelliSense 中显示所有 Visual Studio 代码片段？

片段中的Android webView显示空白页面