求高手看看这段代码!为什么在不同浏览器运行出错
为什么这段代码,在ie下运行出错,在其他浏览器运行没有问题,请高手指点下!
ie下错误提示如下:
行: 60
错误: 缺少函数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> 小球游戏 </title> <script type="text/javascript"> var seconds=20; var tep_x=1; var tep_y=1; function move(){ tep_x++; tep_y+=1; var img=document.getElementById("myimg"); var left=img.style.marginLeft; var top=img.style.marginTop; if(left=="135px"){ if(top=="0px"){ //小球到达顶部 alert("小球到达顶部"); }else if(top<="185px" && top>"0px"){ //小球撞到右边的墙 // alert("小球撞到右边的墙"); window.clearInterval(intval); } } left=parseInt(left.substr(0,left.length-2)); top=parseInt(top.substr(0,top.length-2)); img.style.marginLeft=(left+tep_x)+"px"; img.style.marginTop=(top-tep_y)+"px"; tep_x=0; tep_y=0; } var intval= window.setInterval("move()",seconds); function start(){ intval= window.setInterval("move()",seconds); } function stop(){ window.clearInterval(intval); } </script> </head> <body> <div id="divid" style="width:150px; height:200px; border:1px #FFCC66 solid"> <img src="1.gif" id="myimg" style=" witdth:15px; height:15px;margin-left:50px; margin-top:185px;"> </div> <input type="button" value="开始" onclick="start()"> <input type="button" value="结束" onclick="stop()"> </body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> 小球游戏 </title> <script type="text/javascript"> var seconds=20; var tep_x=1; var tep_y=1; function move(){ tep_x++; tep_y+=1; var img=document.getElementById("myimg"); var left=img.style.marginLeft; var top=img.style.marginTop; if(left=="135px"){ if(top=="0px"){ //小球到达顶部 alert("小球到达顶部"); }else if(top<="185px" && top>"0px"){ //小球撞到右边的墙 // alert("小球撞到右边的墙"); window.clearInterval(intval); } } left=parseInt(left.substr(0,left.length-2)); top=parseInt(top.substr(0,top.length-2)); img.style.marginLeft=(left+tep_x)+"px"; img.style.marginTop=(top-tep_y)+"px"; tep_x=0; tep_y=0; } var intval= window.setInterval("move()",seconds); function startMove(){ intval= window.setInterval("move()",seconds); } function stop(){ window.clearInterval(intval); } </script> </head> <body> <div id="divid" style="width:150px; height:200px; border:1px #FFCC66 solid"> <img src="1.gif" id="myimg" style=" witdth:15px; height:15px;margin-left:50px; margin-top:185px;"> </div> <input type="button" value="开始" onclick="startMove()"> <input type="button" value="结束" onclick="stop()"> </body></html>
[解决办法]
<img src="1.gif" id="myimg" style=" witdth:15px; height:15px;margin-left:50px; margin-top:185px;">
1,这里 width写错了,
2,还有就是 start 是IE的保留字,改一下名字,
其它,贴一个我改进了一下的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> 小球游戏 </title> <script type="text/javascript"> var seconds = 20;//移动频度 var v=1;//速度 var dx, dy;//增量 var x=0;//小球left var y = 0; //小球 top var timer; //计时器 var myimg=document.getElementById("myimg"); function move() { //判断小球是否到达边界,这里的数字是考虑了小球的宽高和容器的宽高之后的结果,用了硬编码 x = x + dx; y = y + dy; if (x > 140 || x < 0) { dx *= -1; if (x > 140) { x = 140 } else { x = 0 } } if (y > 190 || y < 0) { dy *= -1; if (y > 190) { y = 190 } else { y = 0 } } myimg.style.left = x + "px"; myimg.style.top = y + "px"; } // start1(); function start1() { var a = 2 * Math.PI * Math.random(); //起始角度随机 dx=v*Math.cos(a); dy = v * Math.sin(a); if (!timer) { timer = window.setInterval("move()", seconds); } } function stop() { window.clearInterval(timer); timer = null; } </script> </head> <body> <div id="divid" style="width:150px; height:200px; border:1px #FFCC66 solid;position:relative;"> <div id="myimg" style=" width:8px; height:8px;position:absolute;border:1px solid red;"></div> </div> <input type="button" value="开始" onclick="start1()"> <input type="button" value="结束" onclick="stop()"> </body></html>