Javascript 时钟，落后分钟

Question

我想做个小测试，测试我离开 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

Answer 1

解决了@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();
            }
        }

为了以防万一n_n

，我也很快整理了一个 12 小时制

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

            }
        }

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

Answer 2

我可能会这样做：

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;

}

每个人都有自己的！

Javascript 时钟，落后分钟

Javascript clock, minutes behind

javascript

oop

prototype

clock