Javascript时钟，落后几分钟

Javascript clock, minutes behind

本文关键字：分钟 几分钟 时钟 Javascript      更新时间：2023-09-26

我想我会做一个小测试，在离开javascript太久之后测试我的技能。试图真正成为cwleaver并创建一个时钟的对象，听起来很简单。我设法毫无困难地创建了时钟等，但是在大约 20 分钟后运行脚本后，我注意到我的时钟落后了几分钟！不知道我做了什么。

这只是一个小爱好项目，我根本没有从中获得任何好处。接受的任何批评:)

function clock24(element){
            this.date=new Date;
            this.seconds=this.date.getSeconds();
            this.minutes=this.date.getMinutes();
            this.hours=this.date.getHours();
            this.ele=element;
            this.output={seconds:"00",minutes:"00",hours:"00"};
            this.update();
            var self=this;
            this.ele.html(this.output['hours']+":"+this.output['minutes']+":"+this.output['seconds']);
            this.increment=setInterval(function(){
                self.seconds++;
                if(self.seconds==60){
                    self.seconds=0;
                    self.minutes++;
                }
                if(self.minutes==60){
                    self.minutes=0;
                    self.hours++;
                }
                if(self.hours==24){
                    self.hours=0;
                }
                self.update();
                self.ele.html(self.output['hours']+":"+self.output['minutes']+":"+self.output['seconds']);
            },1000);
        }
        clock24.prototype={
            constructor:clock24,
            update:function(){
                this.output['seconds']=(this.seconds<10)?"0"+this.seconds.toString():this.seconds.toString();
                this.output['minutes']=(this.minutes<10)?"0"+this.minutes.toString():this.minutes.toString();
                this.output['hours']=(self.hours<10)?"0"+this.hours.toString():this.hours.toString();
            }
        }

我的猜测是，脚本中的某些内容需要很长时间才能计算出来，但很少引起注意？还是我构建脚本的方式？

不能把我的手指放在上面，但是！我敢打赌这是一件非常愚蠢的事情，我提前为我的愚蠢问题道歉 XD

我可能会这样做：

function clock24(el){
    var started, interval, seconds, minutes, hours;
    this.update = function(){
        var time = new Date(new Date().getTime() - started);
        
        seconds = time.getSeconds();
        minutes = time.getMinutes();
        hours = time.getHours();
        var pretty = hours + ':' + minutes + ':' + seconds;
        if(typeof jQuery !== 'undefined' && el instanceof jQuery)
            el.html( pretty );
        else
            el.innerHTML = pretty;
      
        return this;
      
    }
    
    this.start = function(){
        started = new Date().getTime();
        
        this.update();
        
        interval = setInterval(this.update, 1000);
        
        return this;
    
    }
    
    this.stop = function(){
      
        clearInterval(interval);
      
        return this;
      
    }
    return this;
}
var clock = clock24(document.body).start();
body {
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
}

不过每个人都有自己的！

按照上面评论中@Brennan建议解决了问题。这是我的脚本，以防有人对未来感兴趣。

function clock24(element){
            this.ele=element;
            this.output={};
            this.update();
            var self=this;
            this.ele.html(this.output['hours']+":"+this.output['minutes']+":"+this.output['seconds']);
            this.increment=setInterval(function(){
                self.update();
                self.ele.html(self.output['hours']+":"+self.output['minutes']+":"+self.output['seconds']);
            },1000);
        }
        clock24.prototype={
            constructor:clock24,
            update:function(){
                //probably best not to use 'this'
                this.date=new Date();
                this.seconds=this.date.getSeconds();
                this.minutes=this.date.getMinutes();
                this.hours=this.date.getHours();
                this.output['seconds']=(this.seconds<10)?"0"+this.seconds.toString():this.seconds.toString();
                this.output['minutes']=(this.minutes<10)?"0"+this.minutes.toString():this.minutes.toString();
                this.output['hours']=(self.hours<10)?"0"+this.hours.toString():this.hours.toString();
            }
        }

我还迅速整理了一个 12 小时的时钟，以防万一n_n

function clock12(element){
            this.ele=element;
            this.output={};
            this.update();
            var self=this;
            this.ele.html(this.output['hours']+":"+this.output['minutes']+":"+this.output['seconds']+this.output['ampm']);
            this.increment=setInterval(function(){
                self.update();
                self.ele.html(self.output['hours']+":"+self.output['minutes']+":"+self.output['seconds']+self.output['ampm']);
            },1000);
        }
        clock12.prototype={
            constructor:clock12,
            update:function(){
                this.date=new Date();
                this.seconds=this.date.getSeconds();
                this.minutes=this.date.getMinutes();
                this.hours=this.date.getHours();
                this.output['ampm']=this.hours>='12'?'pm':'am';
                this.hours=this.hours%12;
                this.output['seconds']=(this.seconds<10)?"0"+this.seconds.toString():this.seconds.toString();
                this.output['minutes']=(this.minutes<10)?"0"+this.minutes.toString():this.minutes.toString();
                this.output['hours']=this.hours.toString() ? this.hours.toString():'12';
            }
        }

仍然冻结（可以判断何时应用于文档标题，在其他页面上检查），但时间始终正确。

相关文章：