Javascript 让我的时钟动画提前一秒/分钟启动

我想让我的分钟数和小时数动画提前一秒启动。正如您将看到的，动画当前发生在秒滚动“00”时，我希望动画发生在秒滚动“59”时

我试着改变秒数，使其显示速度快一秒，以纠正这种用法

date.setSeconds(date.getSeconds + 1) 

但是这个数字太疯狂了。我正在将计时器数字转换为背景位置，这可能是一种惰性，但如果我能让它正常工作，这似乎是一个简单的答案。任何想法都将不胜感激。工作演示可以在这里找到

setInterval（函数（）{
变量日期=新日期（）；
var hours=date.getHours（）*100；
var minutes=date.getMinutes（）*100；
var seconds=date.getSeconds（）*100；
var millizes=date.getmillizes（）/10；
/*var minutesNormal=date.getMinutes（）*/
var minCounter=0；
var hourCounter=0；
如果（秒===0）{
最小计数器=毫秒-100；
}否则{
最小计数器=0；
}
如果（分钟===0）{
hourCounter=毫秒-100；
}否则{
小时计数=0；
}
var compClock=document.getElementById（“compareClock”）.innerHTML=“”+hours/100+”“+minutes/100+”“+seconds/100+”
”
/*+“标称分钟数：“+minutesNormal+”更改分钟数：“+minutes/100*/；
var hoursBar=document.getElementById（“小时”）.style.backgroundPosition=“0px”+（小时+小时计数）+“px”；
var minutesBar=document.getElementById（“分钟”）.style.backgroundPosition=“0px”+（分钟+分钟计数器）+“px”；
var secondsBar=document.getElementById（“秒”）.style.backgroundPosition=“0px”+（秒+毫秒）+“px”；
/*警报（秒备用）；*/
}, 10);
@charset“utf-8”；
#容器{
宽度：960px；
位置：相对位置；
保证金：自动；
}
#集装箱码头{
高度：100px；
宽度：300px；
位置：绝对位置；
z指数：1；
背景图片：url（images/clock_front.png）；
背景重复：无重复；
}
#钟{
位置：绝对位置；
宽度：300px；
高度：100px；
背景：#6161；
}
#小时数{
宽度：100px；
高度：100px；
背景图片：url（images/hours.jpg）；
背景重复：重复-y；
浮动：左；
}
#minSecContainer{
宽度：200px；
浮动：对；
}
#会议记录{
宽度：100px；
高度：100px；
背景图片：url（images/minutes.jpg）；
背景重复：重复-y；
浮动：左；
}
#秒{
宽度：100px；
高度：100px；
背景图片：url（images/seconds.jpg）；
背景重复：重复-y；
浮动：对；
}
#testDiv{
背景图片：url（images/minutes.jpg）；
背景位置：0px 100px；
高度：100px；
宽度：100px；
}

无标题文件
我想这正是你想要的


（函数（）{
变量
d_compareclock=document.getElementById（“compareclock”），
d_hours=document.getElementById（“小时”），
d_minutesBar=document.getElementById（“分钟”），
d_secondsBar=document.getElementById（“秒”）；
setInterval（函数（）{
变量
日期=新日期（），
小时=日期。getHours（）*100，
分钟=日期。getMinutes（）*100，
毫秒=date.getmillizes（）/10，
秒=日期。getSeconds（）*100；
如果（date.getSeconds（）>=59）{
分钟+=毫秒；
如果（date.getMinutes（）>=59）
小时+=毫秒；
}
d_compareclock.innerHTML=“”+小时/100+
“+分钟/100+”+秒/100+”

d_hours.style.backgroundPosition=“0px”+（小时）+“px”；
d_minutesBar.style.backgroundPosition=“0px”+
（分钟）+“px”；
d_secondsBar.style.backgroundPosition=“0px”+
（秒+毫秒）+“px”；
}, 10);  
})();
@charset“utf-8”；
#容器{
宽度：960px；
位置：相对位置；
保证金：自动；
}
#集装箱码头{
高度：100px；
宽度：300px；
位置：绝对位置；
z指数：1；
背景图片：url(http://infinitedv.co.uk/clock/images/clock_front.png);
背景重复：无重复；
}
#钟{
位置：绝对位置；
宽度：300px；
高度：100px；
背景：#6161；
}
#小时数{
宽度：100px；
高度：100px；
背景图片：url(http://infinitedv.co.uk/clock/images/hours.jpg);
背景重复：重复-y；
浮动：左；
}
#minSecContainer{
宽度：200px；
浮动：对；
}
#会议记录{
宽度：100px；
高度：100px；
背景图片：url(http://infinitedv.co.uk/clock/images/minutes.jpg);
背景重复：重复-y；
浮动：左；
}
#秒{
宽度：100px；
高度：100px；
背景图片：url(http://infinitedv.co.uk/clock/images/seconds.jpg);
背景重复：重复-y；
浮动：对；
}
#testDiv{
背景图片：url(http://infinitedv.co.uk/clock/images/minutes.jpg);
背景位置：0px 100px；
高度：100px；
宽度：100px；
}

您的工作示例有->
3577（索引）：49未捕获的引用错误：未定义小时计数
Oops，已更正，谢谢您要提前一秒，您可以执行类似->
var triggerWhen=new Date（new Date（）.getTime（）-1000）的操作然后可以改为检查triggerWhen。我会用该变量替换if语句中的零吗？对不起，我对这一点还是有点陌生。我想你可以替换->
var date=new date（）带有
var date=new date（new date（）.getTime（）-1000）在您的代码中，我只在您需要跟踪当前日期时触发。但是看看你的代码，我不确定你是否需要它。我觉得我自己解释得不太清楚。我希望当第二个59拉下时，分钟动画改变，此时它以00改变。我已经用你的代码更新了在线版本。它仍然像以前一样工作。谢谢你的尝试，啊，如果你想把时间提前几分钟，我会做一个更新。好的，完成了，你可能想把时间提前几小时