此 JS/jQuery 代码适用于 Firefox，但不适用于 Chrome
Posted
技术标签:
【中文标题】此 JS/jQuery 代码适用于 Firefox，但不适用于 Chrome【英文标题】：This JS/jQuery code works in Firefox, but not in Chrome 【发布时间】：2014-07-25 14:13:07 【问题描述】：我有一个倒计时时钟在 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 结构（我只向您展示“秒”结构，因为它非常庞大）
<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/
感谢您查看它。
【问题讨论】：
我找到了这个替代方案 -> demo.cnanney.com/apple-counter-revisited 它在 webkit 上运行良好。你怎么看？ 您是否介意共享 css 以便我们检查应用程序状态？这是到目前为止你给我们的一个 JS fiddle，所以如果你愿意，你可以把它放在这里。 jsfiddle.net/9uAqV @Gabriel 我为你添加了 CSS，这是小提琴：jsfiddle.net/pbartrina/uYJUq 用这段代码创建一个 jsbin 可能也是一个好主意，这样人们就可以通过点击链接在浏览器中启动它 我认为我们需要一个 fiddle/jsbin/codepen 之类的东西，因为代码很重要。顺便说一句zDays = !!diffDays, zHrs = !!diffHrs 有点短
【参考方案1】：
只需将 -webkit- 添加到 CSS 的所有 @keyframes (@-webkit-keyframes)、animation 和 transform 属性。这对我有用。
顺便说一句，请lint这个代码加上一些tool...
【讨论】：
以上是关于此 JS/jQuery 代码适用于 Firefox，但不适用于 Chrome的主要内容，如果未能解决你的问题，请参考以下文章
未在使用 Firefox 的选择列表中选择值（适用于 chrome、safari、opera）
CORS 适用于 chrome 但不适用于 firefox、angularjs
适用于 chrome、firefox 和 safari 浏览器的 Azure 浏览器推送通知