JS动态获取当前时间

  HTML部分:

     <div class="div">
            <div id="div">
                
            </div>
        </div>

  CSS样式部分:

*{margin: 0; padding: 0;}
.div{width:100%;height:636px;background: linear-gradient(to top, #333 0%, #fff 100%);}
#div{box-sizing: border-box;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-100%);font-family: STXingkai;font-size: 50PX;}

  JS部分:

         function biao(){
                var div = document.getElementById("div");
                var dt = new Date();    //获取当前系统时间
                var year = dt.getFullYear(); //获取年
                var month = dt.getMonth()+1; //获取月
                var ri = dt.getUTCDate();   //获取日
                var hours = dt.getHours();  //获取时
                var min = dt.getMinutes();  //获取分
                var sec = dt.getSeconds();  //获取秒
                var day = dt.getDay();    //获取星期几,返回的是数字,不是一二三这种中文,
                var arr = ["一","二","三","四","五","六","日"]  //将星期返回的数字转换成中文的一二三四
                div.innerHTML=year+"年"+month+"月"+ri+"日"+hours+"时"+"<br />"+min+"分"+sec+"秒"+"星期:"+arr[day-1];
            }
            setInterval("biao()",1000);  //setInterval定时器:第一个值为biao()这个方法,第二个值为多少秒执行一次。

 

最终效果:

  

 

  

posted @ 2018-01-11 13:01  侯晓伟  阅读(530)  评论(0编辑  收藏  举报