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

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

1. 第一步：在網(wǎng)站的需要顯示時(shí)鐘的網(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;表示當(dāng)網(wǎng)頁載入時(shí)，調(diào)用函數(shù)變量getTime；
   function getTime()創(chuàng)建一個(gè)函數(shù),函數(shù)名為getTime;
   var today=new Date(); 初始化時(shí)間，將當(dāng)前的系統(tǒng)時(shí)間作為起始時(shí)間；
   var year=today.getFullYear(); 獲取當(dāng)前的年份，四位數(shù)
   var month=today.getMonth()+1;獲取當(dāng)前的月份，JS中月份的獲取是從0開始時(shí)，所以要+1
   var day=today.getDay();獲取當(dāng)前的日
   var hours=today.getHours();獲取當(dāng)前的小時(shí)
   var minutes=today.getMinutes();獲取當(dāng)前的分
   var seconds=today.getSeconds();獲取當(dāng)前的秒
   if(minutes<10){ //判斷當(dāng)前的分種小于10，就在前面加0
   minutes="0"+minutes;
   }
   if(seconds<10){//判斷當(dāng)前的秒小于10，就在前面加0
   seconds="0"+seconds;
   }
   var time =year+'年'+month+'月'+day+'日'+hours+":"+minutes+":"+seconds;//將年，月，日，時(shí)，分，秒連起來并賦值給變量time
   document.getElementById('clock').innerHTML=time;//通過JS的DOM操作，把變量time插入到id為clock的位置
   setInterval("getTime()",1000)//通過JS中的 setInterval()方法，每隔1000毫秒也就是1秒執(zhí)行一個(gè)函數(shù)getTime

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

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

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

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

類似教程

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

標(biāo)簽： 代碼 建站

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