我們在有些網(wǎng)站上看到會在網(wǎng)站的某個位置顯示一個動態(tài)變化的時鐘，它是一秒秒的變化。對于這種效果，我們自己做網(wǎng)站時也可以制作出來，只需要通過JS就可以很輕松的實現(xiàn)。（JS可以實現(xiàn)很多特效，更多JS特效看這里：https://www.xuewangzhan.com/jz/jquery/）

如何在網(wǎng)站上制作動態(tài)變化的時鐘的方法：

1. 第一步：在網(wǎng)站的需要顯示時鐘的網(wǎng)頁，在</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;表示當網(wǎng)頁載入時，調用函數(shù)變量getTime；
   function getTime()創(chuàng)建一個函數(shù),函數(shù)名為getTime;
   var today=new Date(); 初始化時間，將當前的系統(tǒng)時間作為起始時間；
   var year=today.getFullYear(); 獲取當前的年份，四位數(shù)
   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秒執(zhí)行一個函數(shù)getTime

2. 第二步：在需要顯示動態(tài)變化的時間的位置，放一個空的DIV就可以了，注意CSS選擇器必須為id="clock"。（相關知識：CSS視頻教程）
   <div id="clock"> </div>

通過以上二步的操作，就可以在自己做的網(wǎng)站上面顯示出一個動態(tài)變化的時鐘了。

當然為了簡化網(wǎng)頁的代碼，你也可以創(chuàng)建一個JS文件，然后把第一步的JS代碼放到JS文件中，然后通過JS的調用的方式 ，把JS文件調用到HTML網(wǎng)頁中，這樣就會代碼簡潔了很多。

想在自己網(wǎng)站顯示動態(tài)時鐘效果的學習如何做網(wǎng)站的學員可以動手試一下，如果你對網(wǎng)站一點不了解，推薦大家先學習建站基礎知識。

類似教程

• js時間倒計時代碼(含時、分、秒)
• 如何在網(wǎng)頁中動態(tài)顯示當前日期和時間（js調用）
• html+js動態(tài)時鐘鐘表制作方法

標簽： 代碼 建站

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。