以为我会做一点测试,在远离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
答案 0 :(得分: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;
}
每个人都是他们自己的!
答案 1 :(得分:0)
解决了@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';
}
}
仍然冻结(可以判断何时应用于文档的标题,在其他页面上进行检查)但时间总是正确的。