js實現(xiàn)電子時鐘功能
更新時間：2022年06月19日 11:42:48 作者：蔣偉平
這篇文章主要為大家詳細介紹了js實現(xiàn)電子時鐘功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
電子時鐘是網(wǎng)上常見的功能，在學(xué)習(xí)date對象和定時器功能時，來完成一個電子時鐘的制作是不錯的選擇。學(xué)習(xí)本教程之前，讀者需要具備html和css技能，同時需要有簡單的javascript基礎(chǔ)。
先準備一個html元素，用來放置時鐘。新建一個div元素，它的id命名為clock，如下所示：
<div id="clock" class="clock_con"></div><!--基礎(chǔ)時鐘元素-->
本實例電子時鐘的格式設(shè)定為 (yyyy-MM-dd hh:mm:ss) ，用js來組合一個簡單的時鐘字符串放到clock元素中。
本實例把時鐘功能封裝到函數(shù)中，所以先創(chuàng)建一個creatClock函數(shù)，在creatClock中再來編寫具體代碼。
筆者建議在完成某一個前端功能時，應(yīng)先分析功能的具體操作。再根據(jù)具體操作把實現(xiàn)功能的方法分成多個步驟，接下來一個步驟一個步驟去完成它。來看一下用js組合這樣一串字符，需要哪些步驟：
1、調(diào)用date對象，獲取計算機的本地時間
1.1 調(diào)用date對象
1.2 獲取當(dāng)前年份
1.3 獲取當(dāng)前月份，月份是從0開始計數(shù)，所以需要加1才是正確的月份
1.4 獲取當(dāng)前日期
1.5 獲取當(dāng)前小時
1.6 獲取分鐘
1.7 獲取秒數(shù)
2、格式化獲取到的時間數(shù)據(jù)
2.1 單數(shù)字前添加字符串0，用以符合時鐘格式
2.2 組合時間數(shù)據(jù)為字符串
3、在clock元素中實時顯示時間
3.1 獲取clock元素
3.2 修改clock元素中的時間
3.3 使用定時器實時更新時間
具體代碼如下：
function fnCreatClock(){
? //聲明時間相關(guān)變量
? var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
? //1 獲取計算機本地時間
? function fnGetDate(){?
? ? //1.1 調(diào)用date對象
? ? dLocal = new Date();
? ? //1.2 獲取當(dāng)前年份
? ? nYear = dLocal.getFullYear();?
? ? //1.3 獲取當(dāng)前月份，月份是從0開始計數(shù)，所以需要加1才是正確的月份
? ? nMonth = dLocal.getMonth() + 1;?
? ? //1.4 獲取當(dāng)前日期
? ? nDate = dLocal.getDate();?
? ? //1.5 獲取當(dāng)前小時
? ? nHours = dLocal.getHours();?
? ? //1.6 獲取分鐘
? ? nMinutes = dLocal.getMinutes();?
? ? //1.7 獲取秒數(shù)
? ? nSeconds = dLocal.getSeconds();?
? }
? //2.1 封裝一個函數(shù)，用于把單數(shù)字前添加字符串0，例如1改為01
? function fnToDouble(num){ ?
? ? //聲明一個返回結(jié)果
? ? var sResult = '';?
? ? if(num<10){
? ? ? //判斷數(shù)字小于10則是單數(shù)字，需要在前面添加字符串0
? ? ? sResult = '0' + num;
? ? }else{
? ? ? //數(shù)字為10以上轉(zhuǎn)換為字符串
? ? ? sResult = '' + num;
? ? }
? ? //返回格式化后的字符串
? ? return sResult;?
? }
? function fnFormatDate(){
? ? //2.2 組合時間數(shù)據(jù)為字符串。本實例主要針對初學(xué)者，所以這里用的是最簡單的格式化方式，即把所有數(shù)據(jù)用+號相連
? ? 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();此時的效果如圖所示：
現(xiàn)在做出來的時鐘看起來感覺有點簡陋，也可以嘗試把數(shù)字換成圖片，這樣所呈現(xiàn)效果就會好很多。這里暫時忽略日期部分，只為時間部分添加圖片效果，還是先看一下需要哪些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代碼可以自己根據(jù)需要編寫，也可以復(fù)制以下代碼使用：
.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 根據(jù)時間修改時、分、秒元素的class，用來改變背景樣式
4.3 使用定時器更新元素背景
修改后的代碼如下：
function fnCreatClock(){
? //聲明時間相關(guān)變量
? var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
? //1 獲取計算機本地時間
? function fnGetDate(){?
? ? //1.1 調(diào)用date對象
? ? dLocal = new Date();
? ? //1.2 獲取當(dāng)前年份
? ? nYear = dLocal.getFullYear();?
? ? //1.3 獲取當(dāng)前月份，月份是從0開始計數(shù)，所以需要加1才是正確的月份
? ? nMonth = dLocal.getMonth() + 1;?
? ? //1.4 獲取當(dāng)前日期
? ? nDate = dLocal.getDate();?
? ? //1.5 獲取當(dāng)前小時
? ? nHours = dLocal.getHours();?
? ? //1.6 獲取分鐘
? ? nMinutes = dLocal.getMinutes();?
? ? //1.7 獲取秒數(shù)
? ? nSeconds = dLocal.getSeconds();?
? }
? //2.1 封裝一個函數(shù)，用于把單數(shù)字前添加字符串0，例如1改為01
? function fnToDouble(num){ ?
? ? //聲明一個返回結(jié)果
? ? var sResult = '';?
? ? if(num<10){
? ? ? //判斷數(shù)字小于10則是單數(shù)字，需要在前面添加字符串0
? ? ? sResult = '0' + num;
? ? }else{
? ? ? //數(shù)字為10以上轉(zhuǎn)換為字符串
? ? ? 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 根據(jù)時間修改時、分、秒元素的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);
? }
? //此函數(shù)用來計算根據(jù)當(dāng)前時間的數(shù)字
? function fnGetImgNum(num,bit){?
? ? //聲明一個返回結(jié)果
? ? var nResult = 0;
? ? //判斷是個位還是十位，0代表十位，1代表個位 ?
? ? if(bit===0){ ?
? ? ? //使用Math.floor可以向下取整，即不管是0.1還是0.9，都是取整數(shù)0。此方法用來獲取時間的十位
? ? ? nResult = Math.floor(num/10);
? ? }else{
? ? ? //通過fnToDouble函數(shù)把時間格式化雙字符串，再取后面一個字符獲取個位，前面的+號用于轉(zhuǎn)換為數(shù)字
? ? ? nResult = +fnToDouble(num).slice(1);
? ? }
? ? return nResult;
? }
? fnChangeImgBg();
? //使用定時器實時更新時間
? setInterval(function(){?
? ? //3.3 每秒更新時間
? ? fnGetDate(); ?
? ? fnChangeImgBg(); ?//4.3 使用定時器更新元素背景
? },1000);?
}
fnCreatClock();此時的效果比單獨的文字還是會增色不少，如圖所示：
我想要求效果再漂亮一點，讓圖片不是很突兀的改變，而是有一個滾動的動畫。要實現(xiàn)這樣的效果，圖片需要改成一張0-9的豎形排列圖，也可以從我隨教程的資源中下載。通過修改元素背景圖片的位置，即可產(chǎn)生滾動的動畫效果。
此效果需要的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過渡樣式用來產(chǎn)生動畫效果，如下所示：
.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 根據(jù)時間修改時、分、秒元素的背景圖片位置
5.3 使用定時器更新元素背景圖片位置
修改后的代碼如下：
function fnCreatClock(){
? //聲明時間相關(guān)變量
? var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
? //1 獲取計算機本地時間
? function fnGetDate(){?
? ? //1.1 調(diào)用date對象
? ? dLocal = new Date();
? ? //1.2 獲取當(dāng)前年份
? ? nYear = dLocal.getFullYear();?
? ? //1.3 獲取當(dāng)前月份，月份是從0開始計數(shù)，所以需要加1才是正確的月份
? ? nMonth = dLocal.getMonth() + 1;?
? ? //1.4 獲取當(dāng)前日期
? ? nDate = dLocal.getDate();?
? ? //1.5 獲取當(dāng)前小時
? ? nHours = dLocal.getHours();?
? ? //1.6 獲取分鐘
? ? nMinutes = dLocal.getMinutes();?
? ? //1.7 獲取秒數(shù)
? ? nSeconds = dLocal.getSeconds();?
? }
? //2.1 封裝一個函數(shù)，用于把單數(shù)字前添加字符串0，例如1改為01
? function fnToDouble(num){ ?
? ? //聲明一個返回結(jié)果
? ? var sResult = '';?
? ? if(num<10){
? ? ? //判斷數(shù)字小于10則是單數(shù)字，需要在前面添加字符串0
? ? ? sResult = '0' + num;
? ? }else{
? ? ? //數(shù)字為10以上轉(zhuǎn)換為字符串
? ? ? sResult = '' + num;
? ? }
? ? //返回格式化后的字符串
? ? return sResult;?
? }
? ?//獲取時間?
? fnGetDate();
??
? //此函數(shù)用來計算根據(jù)當(dāng)前時間的數(shù)字
? function fnGetImgNum(num,bit){?
? ? //聲明一個返回結(jié)果
? ? var nResult = 0;
? ? //判斷是個位還是十位，0代表十位，1代表個位 ?
? ? if(bit===0){ ?
? ? ? //使用Math.floor可以向下取整，即不管是0.1還是0.9，都是取整數(shù)0。此方法用來獲取時間的十位
? ? ? nResult = Math.floor(num/10);
? ? }else{
? ? ? //通過fnToDouble函數(shù)把時間格式化雙字符串，再取后面一個字符獲取個位，前面的+號用于轉(zhuǎn)換為數(shù)字
? ? ? 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 根據(jù)時間修改時、分、秒元素的背景圖片位置
? 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();本實例中，動畫在數(shù)字變?yōu)?時的幅度會有點大，讀者有空的話可以想想換種思路來實現(xiàn)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript解決小數(shù)的加減乘除精度丟失的方案
這篇文章主要介紹了javascript解決小數(shù)的加減乘除精度丟失的方案的相關(guān)資料以及JavaScript中關(guān)于丟失數(shù)字精度的問題的探討，非常的詳細,需要的朋友可以參考下2016-05-05
這篇文章主要分享一個Javascript隨機標(biāo)簽云代碼實例,需要的朋友可以參考下。2016-06-06
Javascript 鼠標(biāo)移動上去小三角形滑塊緩慢跟隨效果
一個tab選項卡，當(dāng)鼠標(biāo)移動上去時紅色滑塊跟隨,在布局過程中經(jīng)常會使用到，本文提供了詳細的實現(xiàn)代碼，感興趣的朋友可以參考下2013-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)分享商品海報功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
input:file是一個文件上傳控件，如何讀取input:file的路徑并顯示圖片，具體實現(xiàn)如下，需要注意的是在IE8中由于IE8自作聰明的將真實路徑隱藏起來2013-09-09
鍵盤上一張下一張兼容IE/google/firefox等瀏覽器
鍵盤上一張下一張的效果想必大家都有見到過吧，本文為大家介紹的這個兼容IE，google，firefox等主流瀏覽器2014-01-01
這篇文章主要為大家介紹了如何使npm-scripts更好維護的配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
javascript 中 array.sort() 中的參數(shù)，需要傳入的是一個函數(shù)，而且必須是一個函數(shù)2011-10-10
這篇文章主要介紹了javascript中AJAX用法,實例分析了針對不同瀏覽器的Ajax使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
如何用JS播放wav文件，理論上用js在網(wǎng)頁里嵌入一個window播放器的插件,可以播放的。,不過通用性不是很好,IE下可以用，感興趣的朋友可以參考下哈本文2013-04-04