我的简单Javascript代码正在使用Safari,但不是Chrome,Firefox和Opera,这有什么不对吗?

时间:2016-04-13 21:42:44

标签: javascript html

下面的Javascript似乎不适用于Chrome,Firefox和Opera。

<html>
<script>
function window_onLoad(){
  var ang;
  var i;
  imgMid.style.posLeft = document.body.clientWidth / 2;
  imgMid.style.posTop = document.body.clientHeight / 2;
  ang = 6.2 / 8;
  Position(div1, ang);
  Position(div2, ang * 2);
  Position(div3, ang * 3);
  Position(div4, ang * 4);
  Position(div5, ang * 5);
  Position(div6, ang * 6);
  Position(div7, ang * 7);
  Position(div8, ang * 8);
}

function Position(objO, a){
  objO.style.posLeft = imgMid.style.posLeft + Math.sin(a) * 200;
  objO.style.posTop = imgMid.style.posTop - Math.cos(a) * 200;
}
</script>

<body onload="window_onLoad()">
  <img id=imgMid style="position: absolute;" src="dot.gif" />
  <div id=div1 style="position: absolute;">1</div>
  <div id=div2 style="position: absolute;">2</div>
  <div id=div3 style="position: absolute;">3</div>
  <div id=div4 style="position: absolute;">4</div>
  <div id=div5 style="position: absolute;">5</div>
  <div id=div6 style="position: absolute;">6</div>
  <div id=div7 style="position: absolute;">7</div>
  <div id=div8 style="position: absolute;">8</div>
</body>
</html>

因此,它显示为imgMid和右上角的数字,但在Safari中,它显示为imgMid周围的数字圆圈,正如其意图所示。

2 个答案:

答案 0 :(得分:1)

Don't use onevent HTML attributes.

此外,loadwindow事件,不应在body上触发。请在DOMContentLoaded上使用document事件:

document.addEventListener("DOMContentLoaded", window_onLoad})

答案 1 :(得分:0)

好的,在找到你真正打算做的事后我做了一些编码,所以这就是我提出的:

function window_onLoad(){
  var ang;
  var i;
  imgMid.style.left = document.body.clientWidth / 2;
  imgMid.style.top = document.body.clientHeight / 2;
  ang = 6.2 / 8;
  for(var i = 1 ; i < 9 ; i++)
     Position('div' + i, ang * i);
}
function getInt(value){
  return parseInt(value.replace('px', ''), 10);
}
function Position(id, a){
  var objO = document.getElementById(id);
  var imgMid = document.getElementById('imgMid');
  objO.style.left = getInt(imgMid.style.left) + Math.sin(a) * 200 + 'px';
  objO.style.top = getInt(imgMid.style.top) - Math.cos(a) * 200 + 'px';
}

还有一件重要的事情:如果您希望它们居中,请将所有内容放在div中!