在具有无限循环的半圆形路径中移动Div。错误

时间:2014-03-13 11:14:23

标签: javascript for-loop infinite-loop

我正试图在半圆形路径上移动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> 

0 个答案:

没有答案