html+js动态时钟钟表制作方法

我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟，它是一秒秒的变化。对于这种效果，我们自己做网站时也可以制作出来，只需要通过JS就可以很轻松的实现。先看下效果：

在自己网站上使用html js制作动态时钟钟表的方法如下：

1. 在网站的头部文件</head>标签上方放入以下的JS代码：

   
   <script>
   
   window.onload=getTime;
   
   function getTime(){
   
   var today=new Date();
   
   var year=today.getFullYear();
   
   var month=today.getMonth()+1;
   
   var day=today.getDay();
   
   var hours=today.getHours();
   
   var minutes=today.getMinutes();
   
   var seconds=today.getSeconds();
   
   if(minutes<10){
   
   minutes="0"+minutes;
   
   }
   
   if(seconds<10){
   
   seconds="0"+seconds;
   
   }
   
   var time =year+'年'+month+'月'+day+'日'+hours+":"+minutes+":"+seconds;
   
   document.getElementById('clock').innerHTML=time;
   
   setInterval("getTime()",1000)
   
   }
   
   </script>
   
   

2. 使用以下的HTML代码来调用显示动态时钟钟表。（如果对HTML不了解，可以学习一下html视频教程）

   
   <div id="clock">  </div>
   
   

除了使用html+js制作动态时钟钟表之外，还可以创建一个JS文件，然后把第一步的JS代码放到JS文件中，然后通过JS的调用的方式 ，把JS文件调用到HTML网页中，这样就会代码简洁了很多。

标签： 代码

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。