電子時鐘是網上常見的功能，在學習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();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115168.html
標籤：JavaScript
上一篇：再接再厲，JSONViewer現已支持Firefox、Microsoft Edge、360瀏覽器，可能是最好用的JSON格式化工具