我正试图在半圆形路径上移动div。我尝试了参数方程式,但它确实有效。
我不知道为什么使用for循环会让我的程序停止工作。 当我尝试使用for循环移动它时,浏览器停止工作,内存使用量猛增。
我不知道是什么问题。请告知。
<html>
<head>
<title>movediv</title>
<style type="text/css">
.bodycss {
background-color: aqua ;
}
.posmove{
position: absolute;
background-color: blue;
width: 20px;
height: 20px;
}
.buttonpos{
position: absolute;
top:250px;
left:250px;
background-color: "green";
}
</style>
<script type="text/javascript">
var i=0,j=0;
var x = 100;
function movediv()
{
for(i=250-x;i<251+x;i++)
{
j = 250 + Math.floor(Math.sqrt((x*x) - (i-250)*(i-250)));
setTimeout(function()
{
document.getElementById('point').style.top = j + "px";
document.getElementById('point').style.left = i + "px";
}, 100);
if(i==250+x) i=250-x;
}
}
</script>
</head>
<body class="bodycss">
<div class="posmove" id="point"></div>
<form>
<input type="button" id="radius" class="buttonpos" onclick="movediv();" >
</form>
</body>
</html>