JS时钟实现(一)

原创 2016年05月31日 19:52:24

时钟实现基本上是JS里面一个常见的功能,很容易实现,也有不少细节需要注意。这里我简单记录下实现的过程及遇到的问题。

时钟一般实现分为两种,模拟时钟和数字时钟。前者要求在表示钟表的图上实现时钟,后者只是简单的实现实时刷新,所以后者是前者的基础。

在本例中,实现了以下功能:

  • 获取系统时间;
  • 将得到的时间进行包装,便于自定义显示方式;

在这里遇到过以下问题:
- 多个函数获取系统时间时,存在差异;(一次获取,多次使用)
- 优化更新时,不能使用技术更新;(必须根据事实结果来更新)

$(document).ready(function(){
   var old_hour=0,count=0;
   setInterval(function(){
      var today=new Date();
      var time=today.toLocaleString();
      var sec=today.getSeconds();
      updateTime(time);
      if(old_hour===0||sec%60==0){
          var hour=today.getHours();
          var minute=today.getMinutes();
          old_hour=updateHourMin(hour,minute,old_hour);
      } 
   },1000);
});
function updateTime(){
    $("#clock").html("当前时间:"+arguments[0]);
}

function updateHourMin(hour,minute,old_hour){
      if(old_hour!==hour){
      //just update the minute
        if(hour>=10)
           $("#hour").text(hour);
        else
           $("#hour").text("0"+hour);  
      }
      //update the hour
        if(minute>=10)
           $("#minutes").text(minute);
        else
           $("#minutes").text("0"+minute);
        return hour;
}

相关文章推荐

JS,写时钟代码

JS时钟 *{ margin: 0; padding: 0; } .box{ margin:100px auto;  width: 600px; height: 600px; b...

纯JS实现动态时间显示代码

一、 JavaScript获取当前日期时间同时显示星期几,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

纯js数字时钟

QQ:285679784   欢迎加入技术交流QQ群80669150  一起学习 !     数字时钟效果                    ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js实现时钟

最近在看js相关的书,同时手上一个课程项目需要写页面的一些内容,我就顺带实践了下,时钟算是第一个实践吧,之后如果还有我会继续放上来 ...

js 实现页面时钟

页面时钟 function check(val) { if (val < 10) { return ("0" + val); } else { return (val); ...

JS实现电子时钟效果

html/css+js实现电子时钟效果

前端初级开发笔试题——用js编写一个时钟实例

一般出题形式是要面试者在html页面中填写js代码,比较钻牛角尖的还必须用原生js写(有些面试官就是这样,认为写原生js显得比较牛一些),本人认为没有多大必要,编程的出现本身就是为了提高效率,有jQu...
  • bboyjoe
  • bboyjoe
  • 2015年09月21日 00:30
  • 2000

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

用js实现一个时钟

Clock            *{          margin: 0;          padding: 0;      }      .canvas{          ma...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS时钟实现(一)
举报原因:
原因补充:

(最多只允许输入30个字)