zoukankan      html  css  js  c++  java
  • 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 + "日" + "	" + hours + ":" + minutes + ":" + seconds + "	" + Week[Weekday];
    
    };

    效果如下

  • 相关阅读:
    技术一定要动手做一遍才算自已的
    终于提离职了,感觉如释重负
    自我评定与学习计划
    MYSQL---INSERT...SELECT...
    MYSQL---LIMIT
    SQL---having
    MYSQL---数据定义
    CSS---Block和inline元素对比
    CSS---清除浮动
    T-SQL---分页语句
  • 原文地址:https://www.cnblogs.com/s1eepDumling/p/11558730.html
Copyright © 2011-2022 走看看