電子時鐘是web常見效果，在學習js的過程中，自己製作一個電子時間，有利於加深對date對象和定時器的理解。本教程共寫有三種時鐘效果，一是純文字的時鐘；二是圖片背景的時鐘，效果比純文字時鐘好看很多；三是時間改變時，數字圖片會產生滾動效果的時間。由簡入深詳細講解js時鐘的製作步驟。 ...
電子時鐘是網上常見的功能，在學習date對象和定時器功能時，來完成一個電子時鐘的製作是不錯的選擇。學習本教程之前，讀者需要具備html和css技能，同時需要有簡單的javascript基礎。
先準備一個html元素，用來放置時鐘。新建一個div元素，它的id命名為clock，如下所示：
<div id="clock" class="clock_con"></div><!--基礎時鐘元素-->
本實例電子時鐘的格式設定為 (yyyy-MM-dd hh:mm:ss) ，用js來組合一個簡單的時鐘字元串放到clock元素中。
本實例把時鐘功能封裝到函數中，所以先創建一個creatClock函數，在creatClock中再來編寫具體代碼。
建議在完成某一個前端功能時，應先分析功能的具體操作。再根據具體操作把實現功能的方法分成多個步驟，接下來一個步驟一個步驟去完成它。來看一下用js組合這樣一串字元，需要哪些步驟：
1 調用date對象，獲取電腦的本地時間
1.1 調用date對象
1.2 獲取當前年份
1.3 獲取當前月份，月份是從0開始計數，所以需要加1才是正確的月份
1.4 獲取當前日期
1.5 獲取當前小時
1.6 獲取分鐘
1.7 獲取秒數
2. 格式化獲取到的時間數據
2.1 單數字前添加字元串0，用以符合時鐘格式
2.2 組合時間數據為字元串
3. 在clock元素中實時顯示時間
3.1 獲取clock元素
3.2 修改clock元素中的時間
3.3 使用定時器實時更新時間
具體代碼如下：
function fnCreatClock(){ //聲明時間相關變數 var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 獲取電腦本地時間 function fnGetDate(){ //1.1 調用date對象 dLocal = new Date(); //1.2 獲取當前年份 nYear = dLocal.getFullYear(); //1.3 獲取當前月份，月份是從0開始計數，所以需要加1才是正確的月份 nMonth = dLocal.getMonth() + 1; //1.4 獲取當前日期 nDate = dLocal.getDate(); //1.5 獲取當前小時 nHours = dLocal.getHours(); //1.6 獲取分鐘 nMinutes = dLocal.getMinutes(); //1.7 獲取秒數 nSeconds = dLocal.getSeconds(); } //2.1 封裝一個函數，用於把單數字前添加字元串0，例如1改為01 function fnToDouble(num){ //聲明一個返回結果 var sResult = ''; if(num<10){ //判斷數字小於10則是單數字，需要在前面添加字元串0 sResult = '0' + num; }else{ //數字為10以上轉換為字元串 sResult = '' + num; } //返回格式化後的字元串 return sResult; } function fnFormatDate(){ //2.2 組合時間數據為字元串。本實例主要針對初學者，所以這裡用的是最簡單的格式化方式，即把所有數據用+號相連 return nYear + '-' + fnToDouble(nMonth) + '-' + fnToDouble(nDate) + ' ' + fnToDouble(nHours) + ':' + fnToDouble(nMinutes) + ':' + fnToDouble(nSeconds); } //3.1 獲取clock元素 var eClock = document.getElementById('clock'); //獲取時間 fnGetDate(); //3.2 修改clock元素中的時間 eClock.innerHTML = fnFormatDate(); //使用定時器實時更新時間 setInterval(function(){ //3.3 每秒更新時間 fnGetDate(); //3.3 修改clock元素中的時間 eClock.innerHTML = fnFormatDate(); },1000); } fnCreatClock();
此時的效果如圖所示：
現在做出來的時鐘看起來感覺有點簡陋，也可以嘗試把數字換成圖片，這樣所呈現效果就會好很多。這裡暫時忽略日期部分，只為時間部分添加圖片效果，還是先看一下需要哪些html元素，代碼如下：
<div id="imgClock" class="clock_container"><!--圖片時鐘元素--> <div id="imgHours" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> <div class="img_point"></div> <div id="imgMinutes" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> <div class="img_point"></div> <div id="imgSeconds" class="img_box"> <span class="img_0"></span> <span class="img_0"></span> </div> </div>
還需要準備0-9共10張圖片，可以自己製作類似效果的數字圖片。css代碼可以自己根據需要編寫，也可以複製以下代碼使用：
.clock_container{ margin-top:60px; font-size:0; text-align:center; } .clock_container div{ display:inline-block; } .clock_container .img_box span{ display:inline-block; width:80px; height:100px; margin:0 2px; border-radius:8px; background-color:#77a6b6; } .clock_container .img_0{ background:url(img/img_0.png) no-repeat; } .clock_container .img_1{ background:url(img/img_1.png) no-repeat; } .clock_container .img_2{ background:url(img/img_2.png) no-repeat; } .clock_container .img_3{ background:url(img/img_3.png) no-repeat; } .clock_container .img_4{ background:url(img/img_4.png) no-repeat; } .clock_container .img_5{ background:url(img/img_5.png) no-repeat; } .clock_container .img_6{ background:url(img/img_6.png) no-repeat; } .clock_container .img_7{ background:url(img/img_7.png) no-repeat; } .clock_container .img_8{ background:url(img/img_8.png) no-repeat; } .clock_container .img_9{ background:url(img/img_9.png) no-repeat; } .clock_container .img_point{ width:60px; height:100px; background:url(img/img_point.png) no-repeat center; }
按照慣例，完成功能前先整理步驟。這裡再多添加一個步驟，在imgClock元素中來完成圖片美化後的時鐘效果，步驟如下：
4. 在imgClock元素中，用圖片作為背景實時修改時間
4.1 分別獲取時(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
4.2 根據時間修改時、分、秒元素的class，用來改變背景樣式
4.3 使用定時器更新元素背景
修改後的代碼如下：
function fnCreatClock(){ //聲明時間相關變數 var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 獲取電腦本地時間 function fnGetDate(){ //1.1 調用date對象 dLocal = new Date(); //1.2 獲取當前年份 nYear = dLocal.getFullYear(); //1.3 獲取當前月份，月份是從0開始計數，所以需要加1才是正確的月份 nMonth = dLocal.getMonth() + 1; //1.4 獲取當前日期 nDate = dLocal.getDate(); //1.5 獲取當前小時 nHours = dLocal.getHours(); //1.6 獲取分鐘 nMinutes = dLocal.getMinutes(); //1.7 獲取秒數 nSeconds = dLocal.getSeconds(); } //2.1 封裝一個函數，用於把單數字前添加字元串0，例如1改為01 function fnToDouble(num){ //聲明一個返回結果 var sResult = ''; if(num<10){ //判斷數字小於10則是單數字，需要在前面添加字元串0 sResult = '0' + num; }else{ //數字為10以上轉換為字元串 sResult = '' + num; } //返回格式化後的字元串 return sResult; } //獲取時間 fnGetDate(); //4.1 獲取圖片背景的小時元素 var eImgHours = document.getElementById('imgHours'); //獲取小時的第一個元素 var eHours1 = eImgHours.getElementsByTagName('span')[0]; //獲取小時的第二個元素 var eHours2 = eImgHours.getElementsByTagName('span')[1]; //4.1 獲取圖片背景的分鐘元素 var eImgMinutes = document.getElementById('imgMinutes'); //獲取分鐘的第一個元素 var eMinutes1 = eImgMinutes.getElementsByTagName('span')[0]; //獲取分鐘的第二個元素 var eMinutes2 = eImgMinutes.getElementsByTagName('span')[1]; //4.1 獲取圖片背景的秒元素 var eImgSeconds = document.getElementById('imgSeconds'); //獲取秒的第一個元素 var eSeconds1 = eImgSeconds.getElementsByTagName('span')[0]; //獲取秒的第二個元素 var eSeconds2 = eImgSeconds.getElementsByTagName('span')[1]; // 4.2 根據時間修改時、分、秒元素的class，用來改變背景樣式 function fnChangeImgBg(){ eHours1.className = 'img_' + fnGetImgNum(nHours,0); eHours2.className = 'img_' + fnGetImgNum(nHours,1); eMinutes1.className = 'img_' + fnGetImgNum(nMinutes,0); eMinutes2.className = 'img_' + fnGetImgNum(nMinutes,1); eSeconds1.className = 'img_' + fnGetImgNum(nSeconds,0); eSeconds2.className = 'img_' + fnGetImgNum(nSeconds,1); } //此函數用來計算根據當前時間的數字 function fnGetImgNum(num,bit){ //聲明一個返回結果 var nResult = 0; //判斷是個位還是十位，0代表十位，1代表個位 if(bit===0){ //使用Math.floor可以向下取整，即不管是0.1還是0.9，都是取整數0。此方法用來獲取時間的十位 nResult = Math.floor(num/10); }else{ //通過fnToDouble函數把時間格式化雙字元串，再取後面一個字元獲取個位，前面的+號用於轉換為數字 nResult = +fnToDouble(num).slice(1); } return nResult; } fnChangeImgBg(); //使用定時器實時更新時間 setInterval(function(){ //3.3 每秒更新時間 fnGetDate(); fnChangeImgBg(); //4.3 使用定時器更新元素背景 },1000); } fnCreatClock();
此時的效果比單獨的文字還是會增色不少，如圖所示：
我想要求效果再漂亮一點，讓圖片不是很突兀的改變，而是有一個滾動的動畫。要實現這樣的效果，圖片需要改成一張0-9的豎形排列圖，每個數字的高度要和時鐘元素高度一致。再通過修改元素背景圖片的位置，即可產生滾動的動畫效果。
此效果需要的html元素如下所示：
<div id="animationClock" class="clock_container"><!--動畫時鐘元素--> <div id="animationHours" class="animation_box"> <span></span> <span></span> </div> <div class="img_point"></div> <div id="animationMinutes" class="animation_box"> <span></span> <span></span> </div> <div class="img_point"></div> <div id="animationSeconds" class="animation_box"> <span></span> <span></span> </div> </div>
在css裡面給每一個元素加上同一個背景圖片，需要加上transition過渡樣式用來產生動畫效果，如下所示：
.clock_container .animation_box span{ display:inline-block; width:80px; height:100px; margin:0 2px; border-radius:8px; background-color:#77a6b6; background-image:url(img/img_all.png); background-repeat:no-repeat; transition:.2s; }
再隨著時間改變給每一個時間元素修改背景圖片的位置，即修改background-repeat-y的樣式即可。按照慣例，還是先列步驟：
5. 在animationClock元素中，滾動動畫顯示時鐘的實時變化
5.1 分別獲取時(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
5.2 根據時間修改時、分、秒元素的背景圖片位置
5.3 使用定時器更新元素背景圖片位置
修改後的代碼如下：
function fnCreatClock(){ //聲明時間相關變數 var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 獲取電腦本地時間 function fnGetDate(){ //1.1 調用date對象 dLocal = new Date(); //1.2 獲取當前年份 nYear = dLocal.getFullYear(); //1.3 獲取當前月份，月份是從0開始計數，所以需要加1才是正確的月份 nMonth = dLocal.getMonth() + 1; //1.4 獲取當前日期 nDate = dLocal.getDate(); //1.5 獲取當前小時 nHours = dLocal.getHours(); //1.6 獲取分鐘 nMinutes = dLocal.getMinutes(); //1.7 獲取秒數 nSeconds = dLocal.getSeconds(); } //2.1 封裝一個函數，用於把單數字前添加字元串0，例如1改為01 function fnToDouble(num){ //聲明一個返回結果 var sResult = ''; if(num<10){ //判斷數字小於10則是單數字，需要在前面添加字元串0 sResult = '0' + num; }else{ //數字為10以上轉換為字元串 sResult = '' + num; } //返回格式化後的字元串 return sResult; } //獲取時間 fnGetDate(); //此函數用來計算根據當前時間的數字 function fnGetImgNum(num,bit){ //聲明一個返回結果 var nResult = 0; //判斷是個位還是十位，0代表十位，1代表個位 if(bit===0){ //使用Math.floor可以向下取整，即不管是0.1還是0.9，都是取整數0。此方法用來獲取時間的十位 nResult = Math.floor(num/10); }else{ //通過fnToDouble函數把時間格式化雙字元串，再取後面一個字元獲取個位，前面的+號用於轉換為數字 nResult = +fnToDouble(num).slice(1); } return nResult; } //5.1 獲取動畫時鐘的小時元素 var eAnimationHours = document.getElementById('animationHours'); //獲取小時的第一個元素 var eHours3 = eAnimationHours.getElementsByTagName('span')[0]; //獲取小時的第二個元素 var eHours4 = eAnimationHours.getElementsByTagName('span')[1]; //5.1 獲取動畫時鐘的分鐘元素 var eAnimationMinutes = document.getElementById('animationMinutes'); //獲取分鐘的第一個元素 var eMinutes3 = eAnimationMinutes.getElementsByTagName('span')[0]; //獲取分鐘的第二個元素 var eMinutes4 = eAnimationMinutes.getElementsByTagName('span')[1]; //5.1 獲取動畫時鐘的秒元素 var eAnimationSeconds = document.getElementById('animationSeconds'); //獲取秒的第一個元素 var eSeconds3 = eAnimationSeconds.getElementsByTagName('span')[0]; //獲取秒的第二個元素 var eSeconds4 = eAnimationSeconds.getElementsByTagName('span')[1]; // 5.2 根據時間修改時、分、秒元素的背景圖片位置 function fnAnimationBg(){ eHours3.style.backgroundPositionY = -fnGetImgNum(nHours,0) * 100 + 'px'; eHours4.style.backgroundPositionY = -fnGetImgNum(nHours,1) * 100 + 'px'; eMinutes3.style.backgroundPositionY = -fnGetImgNum(nMinutes,0) * 100 + 'px'; eMinutes4.style.backgroundPositionY = -fnGetImgNum(nMinutes,1) * 100 + 'px'; eSeconds3.style.backgroundPositionY = -fnGetImgNum(nSeconds,0) * 100 + 'px'; eSeconds4.style.backgroundPositionY = -fnGetImgNum(nSeconds,1) * 100 + 'px'; } fnAnimationBg(); //使用定時器實時更新時間 setInterval(function(){ //3.3 每秒更新時間 fnGetDate(); //5.3 使用定時器更新元素背景圖片位置 fnAnimationBg(); },1000); } fnCreatClock();
