如何在网站上制作一个动态更新时钟

我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟，它是一秒秒的变化。对于这种效果，我们自己做网站时也可以制作出来，只需要通过JS就可以很轻松的实现。（JS可以实现很多特效，更多JS特效看这里：https://www.xuewangzhan.com/jz/jquery/）

如何在网站上制作动态变化的时钟的方法：

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>

   代码解释：

   window.onload=getTime;表示当网页载入时，调用函数变量getTime；
   function getTime()创建一个函数,函数名为getTime;
   var today=new Date(); 初始化时间，将当前的系统时间作为起始时间；
   var year=today.getFullYear(); 获取当前的年份，四位数
   var month=today.getMonth()+1;获取当前的月份，JS中月份的获取是从0开始时，所以要+1
   var day=today.getDay();获取当前的日
   var hours=today.getHours();获取当前的小时
   var minutes=today.getMinutes();获取当前的分
   var seconds=today.getSeconds();获取当前的秒
   if(minutes<10){ //判断当前的分种小于10，就在前面加0
   minutes="0"+minutes;
   }
   if(seconds<10){//判断当前的秒小于10，就在前面加0
   seconds="0"+seconds;
   }
   var time =year+'年'+month+'月'+day+'日'+hours+":"+minutes+":"+seconds;//将年，月，日，时，分，秒连起来并赋值给变量time
   document.getElementById('clock').innerHTML=time;//通过JS的DOM操作，把变量time插入到id为clock的位置
   setInterval("getTime()",1000)//通过JS中的 setInterval()方法，每隔1000毫秒也就是1秒执行一个函数getTime

2. 第二步：在需要显示动态变化的时间的位置，放一个空的DIV就可以了，注意CSS选择器必须为id="clock"。（相关知识：CSS视频教程）
   <div id="clock"> </div>

通过以上二步的操作，就可以在自己做的网站上面显示出一个动态变化的时钟了。

当然为了简化网页的代码，你也可以创建一个JS文件，然后把第一步的JS代码放到JS文件中，然后通过JS的调用的方式 ，把JS文件调用到HTML网页中，这样就会代码简洁了很多。

想在自己网站显示动态时钟效果的学习如何做网站的学员可以动手试一下，如果你对网站一点不了解，推荐大家先学习建站基础知识。

类似教程

• js时间倒计时代码(含时、分、秒)
• 如何在网页中动态显示当前日期和时间（js调用）
• html+js动态时钟钟表制作方法

标签： 代码 建站

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