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

我可能会这样做：

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

每个人都是他们自己的！

Answer 2

解决了@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';

            }
        }

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

Javascript时钟，分钟落后

2 个答案: