我有一个倒计时时钟在Firefox（JS / jQuery和CSS）中完美运行，但是当我在chrome上运行它时，它并没有按预期工作。 例如：当第二个计数器命中40时，它应该改为下一次迭代，但它会变为49，然后变为39，花费两秒而不是一秒。 经过一些迭代（几分钟）后，它会中断。
我不知道为什么会这样，因为它在FF中运行顺畅（FF和chrome都是最后一个版本）。 Chrome代码执行是否可能与FF不同？
以下是代码：
var today = new Date();
var releaseD = new Date(2014,11-1,5); //11-1 -> November since it goes from 0 to 11
var diffMs = (releaseD - today); // milliseconds between now & end date
var diffDays = Math.round(diffMs / (1000 * 3600 * 24)); // days
var diffHrs = Math.round((diffMs % (1000 * 3600 * 24)) / 3600000); // hours
var diffMins = Math.round(((diffMs % (1000 * 3600 * 24)) % 3600000) / 60000); // minutes
var diffSecs = Math.round((((diffMs % (1000 * 3600 * 24)) % 3600000) % 60000) / 1000 ); // seconds
var zDays = (diffDays === 0)?true:false;
var zHrs = (diffHrs === 0)?true:false;
var zMins = (diffMins === 0)?true:false;
var zSecs = (diffSecs === 0)?true:false;
$("#seconds ul.minutePlay li" ).eq(Math.floor(diffSecs/10) ).addClass("active");
$("#seconds ul.secondPlay li" ).eq((diffSecs % 10)).addClass("active");
$("#minutes ul.minutePlay li" ).eq(Math.floor(diffMins/10) ).addClass("active");
$("#minutes ul.secondPlay li" ).eq((diffMins % 10) ).addClass("active");
$("#hours ul.minutePlay li" ).eq(Math.floor(diffHrs/10) ).addClass("active");
$("#hours ul.secondPlay li" ).eq((diffHrs % 10) ).addClass("active");
$("#days ul.minutePlay li" ).eq(Math.floor(diffDays/100) ).addClass("active");
$("#days ul.secondPlay li" ).eq((Math.floor(diffDays/10)%10) ).addClass("active");
$("#days ul.thirdPlay li" ).eq((diffDays%10) ).addClass("active");
var start = new Date().getTime(),
time = 0,
elapsed = '0';
//controlling interval using server date
function instance()
{
time += 1000;
elapsed = Math.floor(time / 1000)/10;
if(Math.round(elapsed) == elapsed) { elapsed += .0; }
document.title = elapsed;
clockAdvance("seconds", "secondPlay");
var diff = (new Date().getTime() - start) - time;
window.setTimeout(instance, (1000 - diff));
}
window.setTimeout(instance, 1000);
function clockAdvance(which, where) {
$("body" ).removeClass("play");
var aa = $("#" + which + " ul." + where + " li.active");
if (zDays && zHrs && zMins && zSecs){
alert("END");
} else if (aa.is(":first-child")) {
$("#" + which + " ul." + where + " li").removeClass("before");
aa.addClass("before").removeClass("active");
switch (which) {
case "seconds":
if (where === "secondPlay"){
aa = $("#" + which + " ul." + where + " li").eq(9);
clockAdvance("seconds", "minutePlay");
} else {
aa = $("#" + which + " ul." + where + " li").eq(5);
clockAdvance("minutes", "secondPlay");
}
break;
case "minutes":
if (where === "secondPlay"){
aa = $("#" + which + " ul." + where + " li").eq(9);
clockAdvance("minutes", "minutePlay");
} else {
aa = $("#" + which + " ul." + where + " li").eq(5);
clockAdvance("hours", "secondPlay");
}
break;
case "hours":
if (where === "secondPlay"){
if ($("#" + which + " ul.minutePlay li.active .up .inn" ).html() == '0') {
aa = $("#" + which + " ul." + where + " li").eq(3);
} else {
aa = $("#" + which + " ul." + where + " li").eq(9);
}
clockAdvance("hours", "minutePlay");
} else {
aa = $("#" + which + " ul." + where + " li").eq(2);
clockAdvance("days", "thirdPlay");
}
break;
case "days":
aa = $("#" + which + " ul." + where + " li").eq(9);
if (where === "thirdPlay"){
clockAdvance("days", "secondPlay");
} else if (where=== "secondPlay"){
clockAdvance("days", "minutePlay");
}
break;
default:
break;
}
aa.addClass("active")
.closest("body")
.addClass("play");
}
else {
$("#" + which + " ul." + where + " li").removeClass("before");
aa.addClass("before")
.removeClass("active")
.prev("li")
.addClass("active")
.closest("body")
.addClass("play");
}
};
该代码对与此类似的HTML结构起作用（我只向您展示＆＃39;秒＆＃39;结构，因为它非常庞大）
<div id="reloj" class="reloj">
<div id="seconds" class="container">
<ul class="flip minutePlay">
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
</a>
</li>
</ul>
<ul class="flip secondPlay">
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">6</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">6</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
</a>
</li>
</ul>
</div>
</div>
我将其结构化，以便通过CSS类样式更好地制作动画。这是CSS：
#reloj {
width: 100%;
text-align: center;
}
.container {
float: left;
height: 100px;
margin-right: 20px;
text-align: center;
width: 220px;
}
#days{
width: 330px;
}
ul.flip {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
ul.flip li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.flip li:first-child {
z-index: 2;
}
ul.flip li a {
display: block;
height: 100%;
perspective: 200px;
}
ul.flip li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
}
ul.flip li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
ul.flip li a div.up {
transform-origin: 50% 100%;
top: 0;
}
ul.flip li a div.up:after {
content: "";
position:absolute;
top:44px;
left:0;
z-index: 5;
width: 100%;
height: 3px;
background-color: rgba(0,0,0,.4);
}
ul.flip li a div.down {
transform-origin: 50% 0%;
bottom: 0;
}
ul.flip li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #333;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #ccc;
border-radius: 6px;
}
ul.flip li a div.up div.inn {
top: 0;
}
ul.flip li a div.down div.inn {
bottom: 0;
}
/* PLAY */
body.play ul li.before {
z-index: 3;
}
body.play ul li.active {
animation: asd .2s .2s linear both;
z-index: 2;
}
@keyframes asd {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
body.play ul li.active .down {
z-index: 2;
animation: turn .2s .2s linear both;
}
@keyframes turn {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
body.play ul li.before .up {
z-index: 2;
animation: turn2 .2s linear both;
}
@keyframes turn2 {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
/* SHADOW */
body.play ul li.before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, .5)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
animation: show .2s linear both;
}
body.play ul li.active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, .5)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 100%);
animation: hide .2s .1s linear both;
}
/*DOWN*/
body.play ul li.before .down .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .5)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
animation: show .2s linear both;
}
body.play ul li.active .down .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .5)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 100%);
animation: hide .2s .1s linear both;
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
这里有一个jsfiddle：http://jsfiddle.net/pbartrina/uYJUq/
感谢您看一下。