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();
本實例中,動畫在數字變為0時的幅度會有點大,讀者有空的話可以想想換種思路來實現。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。