此代码适用于 Chrome，但不适用于 Internet Explorer答案

【问题标题】：This code works in Chrome but not in internet explorer此代码适用于 Chrome，但不适用于 Internet Explorer
【发布时间】：2014-05-09 11:30:16
【问题描述】：

我可以让这段代码在 Chrome 中运行，但不能在 IE（Internet Explorer）中运行。作为浏览器交叉兼容性，是否可以将一些东西迁移到其他浏览器？

<html>
<head>
</head>
<body>
<style>#move{position:absolute;height:100px;width:100px;background-color:cyan}</style>
<script>
var ok=document.createElement("div");
document.body.appendChild(ok);
ok.setAttribute("id","move");
function jobson(a){
switch(a){
case 0:
setInterval(function(){    
if(ok.style.backgroundColor="black")ok.style.backgroundColor="cyan"},1);
break;
};
setInterval(function(){
if(ok.style.backgroundColor="cyan")ok.style.backgroundColor="black";ok.style.left
(a)+"px";},1);
//distancia
};
setInterval(function(){
for(var i=0;i<1000;i++){
jobson(i);
};},1);
</script>
</body>
</html>

fiddle

【问题讨论】：

这是 Internet Explorer，你期待什么... -_-

标签： javascript css internet-explorer google-chrome setinterval

【解决方案1】：

由于您每 1 毫秒调用一次 setTimeout，因此您正在超载浏览器内存并导致其崩溃。

改变这个（每 1 毫秒）：

setInterval(function () {
    for (var i = 0; i < 1000; i++) {
        jobson(i);
    };
}, 1);

对此（每 100 毫秒）：

setInterval(function () {
    for (var i = 0; i < 1000; i++) {
        jobson(i);
    };
}, 100);

如果您想要纯 CSS3 解决方案：

CSS：

#move {
    position:absolute;
    left:0px;
    top:20px;
    height:100px;
    width:100px;
    background-color:cyan;
    animation:myanimation 1s;
    -moz-animation:myanimation 1s;
    -webkit-animation:myanimation 1s;
}
@keyframes myanimation {
    from {
        left: 0px;
    }
    to {
        left:500px;
    }
}
@-moz-keyframes myanimation {
    from {
        left: 0px;
    }
    to {
        left:500px;
    }
}
@-webkit-keyframes myanimation {
    from {
        left: 0px;
    }
    to {
        left:500px;
    }
}

DEMO HERE

【讨论】：

我正在尝试使用一个 DIV 在屏幕上同时移动，到目前为止，我知道至少在 Google Chrome 中这是可能的。
你愿意使用像 jQuery 这样的库吗？
是的，我愿意，但如果必须选择，我会选择 javascript。
@user2887761 - 查看我更新的答案。仅使用 CSS。无需 Javascript。
很抱歉，我在这里尝试做的事情必须表达错误。根本不是动画，而是填充屏幕而不是 100 个 DIV，只使用一个可以同时在不同位置的 DIV。话虽如此，您会理解一个 DIV 适用于 100。这意味着，不是动画，但我需要在某处使用 setInterval，否则 for 循环将是静态的并直接转到 Internet Explorer 发生的最后一个位置。