当前位置：首页 > 全部内容 > 正文

JavaScript实现电子时钟：从基础文本到图片动画的完整教程

作者：微光

时间：2026-10-25

浏览：586

本文详细介绍如何使用JavaScript结合HTML和CSS制作电子时钟。教程涵盖基础文本时钟、图片替换样式以及滚动动画效果三种实现方式，逐步讲解Date对象的使用、定时器应用及DOM操作技巧，帮助开发者掌握前端时间显示功能的开发方法。

文章目录

JavaScript电子时钟开发概述

电子时钟是网页开发中常见的功能模块。在学习JavaScript的Date对象和定时器机制时，动手制作一个电子时钟是一个极佳的实践项目。在开始本教程前，建议读者已掌握HTML和CSS的基础知识，并具备基本的JavaScript编程能力。

基础文本时钟实现

首先，需要在HTML中创建一个用于显示时钟的元素。新建一个div元素，并将其id属性设置为clock，具体代码如下：

<div id="clock" class="clock_con"></div><!--基础时钟元素-->

本实例中，电子时钟的时间格式设定为“年-月-日 时:分:秒”（yyyy-MM-dd hh:mm:ss）。接下来，使用JavaScript组合生成一个包含当前时间的字符串，并将其插入到clock元素中。

为了代码的整洁与复用，我们将时钟的核心功能封装在一个名为creatClock的函数中。在函数内部编写具体的逻辑代码。

建议在开发前端功能时，先对功能需求进行详细分析，然后将实现过程分解为多个具体步骤，逐一完成。以下是使用JavaScript生成该时间字符串所需的步骤分解：

第一步：调用Date对象，获取计算机的本地系统时间。

具体步骤如下： 1.1 调用Date对象实例化时间对象。 1.2 获取当前年份。 1.3 获取当前月份，注意JavaScript中月份从0开始计数，因此需要加1才能得到正确的月份数值。 1.4 获取当前日期。 1.5 获取当前小时数。 1.6 获取分钟数。 1.7 获取秒数。

第二步：对获取到的时间数据进行格式化，以符合预设的显示格式。

具体格式化操作包括： 2.1 对于个位数的时间数据（如小时、分钟、秒），在数字前添加字符串“0”，以符合时钟的双位显示格式。 2.2 将格式化后的年、月、日、时、分、秒数据组合成一个完整的字符串。

第三步：在clock元素中实时显示时间数据。

具体实现步骤： 3.1 获取id为clock的DOM元素。 3.2 将格式化后的时间字符串赋值给clock元素的innerHTML或textContent，以修改显示内容。 3.3 使用定时器（setInterval）定期执行更新操作，实现时间的实时刷新。

具体的JavaScript实现代码如下：

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();

运行上述代码后的效果如图所示：

JavaScript电子时钟开发概述

图片样式时钟实现

上述实现的时钟外观较为简陋。为了提升视觉效果，可以尝试将数字替换为图片。这里暂时忽略日期部分，仅对时间部分进行图片美化。首先，需要定义相应的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元素中完成图片美化后的时钟效果。具体步骤如下：

第四步：在imgClock元素中，利用图片作为背景，实时修改时间显示。

具体实现步骤： 4.1 分别获取时（imgHours）、分（imgMinutes）、秒（imgSeconds）对应的DOM元素。 4.2 根据当前时间数据，动态修改时、分、秒元素的class属性，从而改变其背景图片样式。 4.3 使用定时器定期执行背景更新操作。

修改后的JavaScript代码如下：

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();

此时的视觉效果比纯文本时钟有了显著提升，如图所示：

JavaScript电子时钟开发概述

滚动动画时钟实现

如果希望效果更加精美，可以让图片切换时具有平滑的滚动动画，避免突兀的跳变。实现此效果需要将图片改为0-9竖向排列的单张长图，同样可从教程资源中下载。通过动态修改元素的背景图片位置（background-position），即可产生滚动动画效果。

实现此动画效果所需的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-position-y的值。按照惯例，先列出实现步骤：

第五步：在animationClock元素中，通过滚动动画显示时钟的实时变化。

具体实现步骤： 5.1 分别获取时（imgHours）、分（imgMinutes）、秒（imgSeconds）对应的DOM元素。 5.2 根据当前时间数据，动态修改时、分、秒元素的背景图片位置（background-position）。 5.3 使用定时器定期执行背景位置更新操作。

修改后的JavaScript代码如下：

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();

在本实例中，当数字从9变为0时，由于背景图片滚动幅度较大，视觉效果可能略显突兀。读者如有兴趣，可以尝试优化思路，设计更平滑的过渡方案。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JavaScript零基础入门：从环境搭建到运行第一段代码

HTML链接中javascript：void(0)的作用及现代替代方案

在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库

原生JavaScript实现简易颜色选择器原理与代码

JS原生表单序列化：FormData与URLSearchParams用法详解

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法