经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js实现电子时钟功能
来源：jb51　　时间：2022/6/20 8:40:44　　对本文有异议

电子时钟是网上常见的功能，在学习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时的幅度会有点大，读者有空的话可以想想换种思路来实现。

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美