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# 常用小点
    WebClient下载文件
    redis常见错误处理
    win2008R2环境配置
    C#程序员知识体系
    js中json的添加和指定位置的删除
    关于本博客的美化
    箭头函数中可改变this作用域,回调函数用箭头函数this指向page,自定义事件用箭头函数this指向undefined
    json_decode 和 json_encode 区别
    tp6中使用微信支付sdk
  • 原文地址:https://www.cnblogs.com/antao/p/13098044.html
Copyright © 2011-2022 走看看