Question

我可以将此代码用于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

Answer 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

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

1 个答案: