js实现动态时间

原创于 2019-07-27 16:26:27 发布 · 464 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一个使用HTML和JavaScript实现的实时时间显示功能。通过在HTML中设置onload事件调用start函数，定时更新页面上两个span元素的时间。第一个span显示本地时间，第二个span自定义显示时间格式，包括年、月、日、时、分、秒及星期。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body onload="start()">
       <span id="time" ></span><br />
       <span id="time2" ></span>
   </body>
</html>
<script>
   //打印本地时间
   function getTime(){
       var time=new Date();
       document.getElementById("time").innerText=time.toLocaleString();
   }
   //自定义打印时间
   function getTime2()
   {
       var time=new Date();
       var year=time.getFullYear();
       var mon=time.getMonth()+1;
       var day=time.getDate();
       var hour=time.getHours();
       var min=time.getMinutes();
       var mm=time.getSeconds();
       var week=time.getDay();
       document.getElementById("time2").innerText=year+"年"+
       mon+"月"+day+"日 "+hour+"时"+min+"分"+mm+"秒"+" 星期"+week
   }
   function start()
   {
   //方法1：
   setInterval("getTime()",1000);
   //方法2;
   setInterval("getTime2()",1000);
   }
</script>