js实现电子时钟功能

2022-06-19 13:48:43 来源:易采站长站 作者:

js实现电子时钟功能

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。pdX站长之家-易采站长站-Easck.Com

先准备一个html元素,用来放置时钟。新建一个div元素,它的id命名为clock,如下所示:pdX站长之家-易采站长站-Easck.Com

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

本实例电子时钟的格式设定为 (yyyy-MM-dd hh:mm:ss) ,用js来组合一个简单的时钟字符串放到clock元素中。pdX站长之家-易采站长站-Easck.Com

本实例把时钟功能封装到函数中,所以先创建一个creatClock函数,在creatClock中再来编写具体代码。pdX站长之家-易采站长站-Easck.Com

笔者建议在完成某一个前端功能时,应先分析功能的具体操作。再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。来看一下用js组合这样一串字符,需要哪些步骤:pdX站长之家-易采站长站-Easck.Com

1、调用date对象,获取计算机的本地时间pdX站长之家-易采站长站-Easck.Com

1.1 调用date对象pdX站长之家-易采站长站-Easck.Com
1.2 获取当前年份pdX站长之家-易采站长站-Easck.Com
1.3 获取当前月份,月份是从0开始计数,所以需要加1才是正确的月份pdX站长之家-易采站长站-Easck.Com
1.4 获取当前日期pdX站长之家-易采站长站-Easck.Com
1.5 获取当前小时pdX站长之家-易采站长站-Easck.Com
1.6 获取分钟pdX站长之家-易采站长站-Easck.Com
1.7 获取秒数pdX站长之家-易采站长站-Easck.Com

2、格式化获取到的时间数据pdX站长之家-易采站长站-Easck.Com

2.1 单数字前添加字符串0,用以符合时钟格式pdX站长之家-易采站长站-Easck.Com
2.2 组合时间数据为字符串pdX站长之家-易采站长站-Easck.Com

3、在clock元素中实时显示时间pdX站长之家-易采站长站-Easck.Com

3.1 获取clock元素pdX站长之家-易采站长站-Easck.Com
3.2 修改clock元素中的时间pdX站长之家-易采站长站-Easck.Com
3.3 使用定时器实时更新时间pdX站长之家-易采站长站-Easck.Com

具体代码如下:pdX站长之家-易采站长站-Easck.Com

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

此时的效果如图所示:pdX站长之家-易采站长站-Easck.Com

pdX站长之家-易采站长站-Easck.Com

现在做出来的时钟看起来感觉有点简陋,也可以尝试把数字换成图片,这样所呈现效果就会好很多。这里暂时忽略日期部分,只为时间部分添加图片效果,还是先看一下需要哪些html元素,代码如下:pdX站长之家-易采站长站-Easck.Com

<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代码可以自己根据需要编写,也可以复制以下代码使用:pdX站长之家-易采站长站-Easck.Com

.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元素中来完成图片美化后的时钟效果,步骤如下:pdX站长之家-易采站长站-Easck.Com

4、在imgClock元素中,用图片作为背景实时修改时间pdX站长之家-易采站长站-Easck.Com

4.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素pdX站长之家-易采站长站-Easck.Com
4.2 根据时间修改时、分、秒元素的class,用来改变背景样式pdX站长之家-易采站长站-Easck.Com
4.3 使用定时器更新元素背景pdX站长之家-易采站长站-Easck.Com

修改后的代码如下:pdX站长之家-易采站长站-Easck.Com

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

此时的效果比单独的文字还是会增色不少,如图所示:pdX站长之家-易采站长站-Easck.Com

pdX站长之家-易采站长站-Easck.Com

我想要求效果再漂亮一点,让图片不是很突兀的改变,而是有一个滚动的动画。要实现这样的效果,图片需要改成一张0-9的竖形排列图,也可以从我随教程的资源中下载。通过修改元素背景图片的位置,即可产生滚动的动画效果。pdX站长之家-易采站长站-Easck.Com

此效果需要的html元素如下所示:pdX站长之家-易采站长站-Easck.Com

<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过渡样式用来产生动画效果,如下所示:pdX站长之家-易采站长站-Easck.Com

.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的样式即可。按照惯例,还是先列步骤:pdX站长之家-易采站长站-Easck.Com

5、在animationClock元素中,滚动动画显示时钟的实时变化pdX站长之家-易采站长站-Easck.Com

5.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素pdX站长之家-易采站长站-Easck.Com
5.2 根据时间修改时、分、秒元素的背景图片位置pdX站长之家-易采站长站-Easck.Com
5.3 使用定时器更新元素背景图片位置pdX站长之家-易采站长站-Easck.Com

修改后的代码如下:pdX站长之家-易采站长站-Easck.Com

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时的幅度会有点大,读者有空的话可以想想换种思路来实现。pdX站长之家-易采站长站-Easck.Com

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易采站长站。pdX站长之家-易采站长站-Easck.Com

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25