如何使用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"></