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。

推薦閱讀: