JS动态获取当前时间

时间:2023-03-09 21:51:12
JS动态获取当前时间

  HTML部分:

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

  CSS样式部分:

*{margin:; padding:;}
.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()这个方法,第二个值为多少秒执行一次。

最终效果:

  JS动态获取当前时间