<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
js實現電子時鐘功能
2022-06-19 18:00:29
電子時鐘是網上常見的功能，在學習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時的幅度會有點大，讀者有空的話可以想想換種思路來實現。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45