码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现页面实时显示时间

时间:2019-09-20 18:44:12      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:body   cti   UNC   问题   表达式   实现   bsp   font   inf   

今天尝试了一下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实现页面实时显示时间

标签:body   cti   UNC   问题   表达式   实现   bsp   font   inf   

原文地址:https://www.cnblogs.com/s1eepDumling/p/11558730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!