zoukankan      html  css  js  c++  java
  • JS实现一个简单的网页钟表

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <title>Clock</title>
        </head>
        <body>
            <div>
                <p id="date"></p>
                <p id="week"></p>
                <p id="clock"></p>
            </div>
            
            <script type="text/javascript" charset="utf-8">
                //设置补0函数
                function toDou(n) {
                    if (n < 10) {
                        return '0' + n;
                    } else {
                        return '' + n;
                    }
                }
    
                //定义一个名为myClock的函数。
                function myClock() {
                    //构造日期对象。
                    var date = new Date();
    
                    // 找到 id名为date的span标签,innerHTML属性中添加HTML代码,这里添加的是要在span标签中显示的时间。getMonth方法加1的原因是因为在JS中月份是从0开始的。
                    document.getElementById("date").innerHTML = date.getFullYear() + "-" + toDou((date.getMonth() + 1)) + "-" + toDou(
                        date.getDate());
    
                    document.getElementById("clock").innerHTML = toDou(date.getHours()) + ":" + toDou(date.getMinutes()) + ":" + toDou(
                        date.getSeconds());
    
                    document.getElementById("week").innerHTML = "星期" + "日一二三四五六".charAt(date.getDay());
                }
    
                //间隔是1000ms,重复执行myClock函数中的内容。
                window.setInterval(myClock, 1000);
            </script>
        </body>
    </html>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    【设计模式】策略模式
    【设计模式】模板方法模式
    【C++】《Effective C++》第五章
    【C++】《Effective C++》第四章
    free命令详解(内存)
    top命令详解(动态进程)
    ps命令详解(静态进程)
    SpringBoot_集成Redis
    SpringBoot_热部署插件
    SpringBoot_实现RESTfull API
  • 原文地址:https://www.cnblogs.com/antao/p/13098044.html
Copyright © 2011-2022 走看看