Javascript时钟，落后几分钟

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

这只是一个小小的爱好项目，我一点也没有从中获益。接受任何批评：）

功能时钟24（元件）{
此日期=新日期；
this.seconds=this.date.getSeconds（）；
this.minutes=this.date.getMinutes（）；
this.hours=this.date.getHours（）；
ele=元素；
输出={秒：“00”，分钟：“00”，小时：“00”}；
这个.update（）；
var self=这个；
this.ele.html（this.output['hours']+'：“+this.output['minutes']+”：“+this.output['seconds']）；
this.increment=setInterval（函数（）{
self.seconds++；
如果（自身秒=60）{
self.seconds=0；
self.minutes++；
}
如果（自身分钟==60）{
self.minutes=0；
self.hours++；
}
如果（自身小时数==24）{
自身工作小时数=0；
}
self.update（）；
self.ele.html（self.output['hours']+'：“+self.output['minutes']+”：“+self.output['seconds']）；
},1000);
}
时钟24.0原型={
建造师：时钟24，
更新：函数（）{
this.output['seconds']=（this.seconds解决了上面@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();
            }
        }

功能时钟24（元件）{
ele=元素；
this.output={}；
这个.update（）；
var self=这个；
this.ele.html（this.output['hours']+'：“+this.output['minutes']+”：“+this.output['seconds']）；
this.increment=setInterval（函数（）{
self.update（）；
self.ele.html（self.output['hours']+'：“+self.output['minutes']+”：“+self.output['seconds']）；
},1000);
}
时钟24.0原型={
建造师：时钟24，
更新：函数（）{
//可能最好不要使用“this”
this.date=新日期（）；
this.seconds=this.date.getSeconds（）；
this.minutes=this.date.getMinutes（）；
this.hours=this.date.getHours（）；
this.output['seconds']=（this.seconds我可能会这样做：


功能时钟24（el）{
var启动，间隔，秒，分，小时；
this.update=函数（）{
var time=新日期（new Date（）.getTime（）-started）；
秒=时间。getSeconds（）；
分钟=时间。getMinutes（）；
小时=时间。getHours（）；
var=hours+'：'+分钟+'：'+秒；
if（jQuery的类型！=“未定义”&&el jQuery实例）
html（pretty）；
其他的
el.innerHTML=pretty；
归还这个；
}
this.start=函数（）{
started=新日期（）.getTime（）；
这个.update（）；
间隔=设置间隔（this.update，1000）；
归还这个；
}
this.stop=函数（）{
间隔时间；
归还这个；
}
归还这个；
}
var clock=clock24（document.body）.start（）；
正文{
字体系列：Arial、Helvetica、无衬线字体；
字号：2em；
}
setInterval
只保证在运行下一次迭代之前至少通过指定的间隔。这意味着有时，它可能在1020ms或1100 ms之后运行。以这种方式创建时钟不够精确。我的建议是使用
new Date（）.getTime（）
在间隔内计算两次运行之间实际经过的确切时间。@Brennan啊！好的，我想可能是这样的，有其他选择吗？或者我应该使用
setInterval
并从
Date.getSeconds（）获得结果
？@sourRaspberri，我更新了我的评论，加入了一个建议消费者级操作系统不是实时的，更不用说运行在它们上面的软件了。我喜欢它，更简洁、更简单的方式：）谢谢！：）另外，如果我要
删除
对象，间隔会自动清除吗？@sourraspberi这个操作符在JS中有点用词不当，因为它只删除对对象的引用，而不是对象本身。为了真正删除对象，你需要确保没有对它的引用，这样它就可以被伪装起来收集的时间。在这种情况下，继续使用将阻止对象被垃圾收集。请参阅我添加的
stop
方法，该方法应在删除之前调用。@sourRaspberri简言之；否。间隔需要使用
clearInterval
方法清除。酷：）谢谢，这很有意思。谢谢或者回来：）
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();
            }
        }

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

            }
        }