zoukankan      html  css  js  c++  java
  • JS倒计时和当前时间

    倒计时

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <h1>倒计时:<div id="djs"></div>
        </h1>
        <script>
            var djs = document.getElementById("djs")
            setInterval(function countDown() {
                var nowTime = +new Date();
                var futureTime = +new Date('2020-04-02 23:20:00');
                var times = (futureTime - nowTime) / 1000;
                var d = parseInt(times / 60 / 60 / 24);
                d = d < 10 ? '0' + d : d;
                var h = parseInt(times / 60 / 60 % 24);
                h = h < 10 ? '0' + h : h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0' + m : m;
                var s = parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                var t = d + '天' + h + '时' + m + '分' + s + '秒';
                document.getElementById("djs").innerHTML = t;
            }, 500);
        </script>
    </body>

    </html>

    当前时间

    <body>
        <div id="Date"></div>
        <script type="text/javascript"> 
            setInterval(function(){   
            var date = new Date();   
            var year = date.getFullYear();    //获取当前年份   
            var mon = date.getMonth()+1;      //获取当前月份   
            var da = date.getDate();          //获取当前日   
            var day = date.getDay();          //获取当前星期几   
            var h = date.getHours();          //获取小时   
            var m = date.getMinutes();        //获取分钟   
            var s = date.getSeconds();        //获取秒   
            var d = document.getElementById('Date');    
              d.innerHTML='当前时间:'+year+'年'+mon+'月'+da+'日'+'星期'+day+' '+h+':'+m+':'+s;  
            },1000)
        </script>
  • 相关阅读:
    使用keras构建简单的网络分类鸢尾花
    矩阵的秩 rank(A)
    矩阵的迹
    数学符号大全速查表
    迷茫的不是青春,是你们回望青春时失焦的眼神。
    服务器Windows Server 2008 远程控制安全设置技巧
    服务器安全维护配置和优化八大要点
    怎么把html页面中共用的底部代码做成共享模块
    回首2017,展望2018,今后的路我们一起走
    手机端rem如何适配_rem详解及使用方法2
  • 原文地址:https://www.cnblogs.com/majestyking/p/12623563.html
Copyright © 2011-2022 走看看