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;
}

《JavaScript学习笔记八》:数字时钟的实现

《JavaScript学习笔记八》:数字时钟的实现在我们的生活中,数字时钟随处可见,在我们的手机上,在我们的电脑上,以及在一些时间软件上,都可以看到数字时钟,与下图类似,这篇博文我们就来模拟下数字时钟...
  • u010412719
  • u010412719
  • 2016年05月30日 20:19
  • 679

JS数字时钟

Clock function toDouble(s) { //将个位的数字转换成带0的字符串 if (s < 10) { return '0'+s; } e...
  • u012351851
  • u012351851
  • 2014年10月18日 14:29
  • 377

用js做一个简单数字时钟(可点击停止)

我是demo啊 function timeMsg() { var myDate=new Date(); var h=myDate.getHours(); var m=myDat...
  • u010257252
  • u010257252
  • 2017年03月22日 21:03
  • 479

纯js数字时钟

QQ:285679784   欢迎加入技术交流QQ群80669150  一起学习 !     数字时钟效果                    ...
  • qq285679784
  • qq285679784
  • 2014年12月06日 17:05
  • 715

JS实现钟表效果

JS实现钟表效果 通过new Date();获取实时时间然后通过css3的定位和旋转实现钟表效果 css代码: .clock { position:...
  • qq_35515563
  • qq_35515563
  • 2017年03月18日 15:46
  • 1948

js 实现页面时钟

页面时钟 function check(val) { if (val < 10) { return ("0" + val); } else { return (val); ...
  • kpchen_0508
  • kpchen_0508
  • 2014年12月05日 17:26
  • 2267

JS实现电子时钟效果

html/css+js实现电子时钟效果
  • lanmushan
  • lanmushan
  • 2016年08月15日 20:21
  • 2416

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

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

JS,写时钟代码

JS时钟 *{ margin: 0; padding: 0; } .box{ margin:100px auto;  width: 600px; height: 600px; b...
  • sunling112
  • sunling112
  • 2016年11月23日 16:09
  • 1306

JS实现网页时钟

网页时钟 function displayTime(){ //1.获取div元素 var timeDiv=document.getElementById("timeDiv"); //2.获...
  • pangqiandou
  • pangqiandou
  • 2017年10月16日 23:05
  • 323
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS时钟实现(一)
举报原因:
原因补充:

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