Question

我在屏幕顶部有5个街区。我想用一个表格设置第一个块的移动速度和旋转速度，其他用随机数设置。使用以下代码，如果我单击“start1”按钮（在窗体外），所有块都会旋转并向下移动。但是，如果我单击“start2”按钮（在窗体内），则所有块都不会移动。两个按钮触发相同的功能，但表单内的单击按钮不能移动和旋转这五个块有人可以告诉我原因吗？抱歉我的英语很差。

<style>
    .block{
        width:100px;
        height:100px;
        display:inline-block;
        position: absolute;
    }
    #b0{
        top:0px;
        left:100px;
        background-color:#0CC;
    }
    #b1{
        top:0px;
        left:250px;
        background-color:#FC0;
    }
    #b2{
        top:0px;
        left:400px;
        background-color:#F66;
    }
    #b3{
        top:0px;
        left:550px;
        background-color:#0CF;
    }
    #b4{
        top:0px;
        left:700px;
        background-color:#6C3;
    }
</style>
<script>    
    var play=false;
    var objs=[];   
    var speeds=[];    
    var rspeeds = []; 
    var pos =[];   
    var angle = [];  

    var move=function()
    {

        if(!play) return;

        for(var i=0; i<=4; i++)
        {
            if(pos[i]>700)  
            {
                pos[i]=0;   
                objs[i].style.top="0px";      

                if(i!=0)   
                {
                    speeds[i]=Math.floor((Math.random()*10+1));
                    rspeeds[i]=Math.floor((Math.random()*10+1));
                }
            }
            else
            {
                angle[i]=(angle[i]+ rspeeds[i] * 2)%360;  
                pos[i]=pos[i]+speeds[i];  

                objs[i].style.transform = "rotate("+ angle[i]+ "deg)"; 
                objs[i].style.top=pos[i]+"px";

            }
        }
    }

    function mystart()
    {
        objs[0]=document.getElementById("b0");     
        speeds[0]=parseInt(myform.speed.value);    
        rspeeds[0]=parseInt(myform.rspeed.value);  

        pos[0]=0;    
        angle[0]=0;  

        for(var i=1; i<=4; i++)
        {
            var obj="b"+i;
            objs[i]=document.getElementById(obj);
            speeds[i]=Math.floor((Math.random()*10+1));   
            rspeeds[i]=Math.floor((Math.random()*10+1));  
            pos[i]=0;   
            angle[i]=0; 
        }
        play = true;

    }

    function mystop()
    {
        play=false;
        for(var i=0; i<=4; i++)
        {
            objs[i].style.top="0px";            
        }
    }   
    setInterval(move, 10);          

</script>
</head>

<body>

<div class="block" id="b0"></div>
<div class="block" id="b1"></div>
<div class="block" id="b2"></div>
<div class="block" id="b3"></div>
<div class="block" id="b4"></div>


<button onclick="mystart()"> start1 </button> <br />
<button onclick="mystop()" > stop1  </button> <br />
<form name="myform">
    speed:
    <input type="text" name="speed"  value="5" size="5" /> <br />
    rspeed:
    <input type="text" name="rspeed" value="2" size="5"  /> <br />
    <button onclick="mystart()"> start2 </button> <br />
    <button onclick="mystop()" > stop2  </button> <br />
</form>

</body>
</html>

Answer 1

你的代码工作正常。我在Chrome和IE11都试过了。这是一个演示：

<style>
    .block{
        width:100px;
        height:100px;
        display:inline-block;
        position: absolute;
    }
    #b0{
        top:0px;
        left:100px;
        background-color:#0CC;
    }
    #b1{
        top:0px;
        left:250px;
        background-color:#FC0;
    }
    #b2{
        top:0px;
        left:400px;
        background-color:#F66;
    }
    #b3{
        top:0px;
        left:550px;
        background-color:#0CF;
    }
    #b4{
        top:0px;
        left:700px;
        background-color:#6C3;
    }
</style>
<script>    
    var play=false;
    var objs=[];   
    var speeds=[];    
    var rspeeds = []; 
    var pos =[];   
    var angle = [];  

    var move=function()
    {

        if(!play) return;

        for(var i=0; i<=4; i++)
        {
            if(pos[i]>700)  
            {
                pos[i]=0;   
                objs[i].style.top="0px";      

                if(i!=0)   
                {
                    speeds[i]=Math.floor((Math.random()*10+1));
                    rspeeds[i]=Math.floor((Math.random()*10+1));
                }
            }
            else
            {
                angle[i]=(angle[i]+ rspeeds[i] * 2)%360;  
                pos[i]=pos[i]+speeds[i];  

                objs[i].style.transform = "rotate("+ angle[i]+ "deg)"; 
                objs[i].style.top=pos[i]+"px";

            }
        }
    }

    function mystart()
    {
        objs[0]=document.getElementById("b0");     
        speeds[0]=parseInt(myform.speed.value);    
        rspeeds[0]=parseInt(myform.rspeed.value);  

        pos[0]=0;    
        angle[0]=0;  

        for(var i=1; i<=4; i++)
        {
            var obj="b"+i;
            objs[i]=document.getElementById(obj);
            speeds[i]=Math.floor((Math.random()*10+1));   
            rspeeds[i]=Math.floor((Math.random()*10+1));  
            pos[i]=0;   
            angle[i]=0; 
        }
        play = true;

    }

    function mystop()
    {
        play=false;
        for(var i=0; i<=4; i++)
        {
            objs[i].style.top="0px";            
        }
    }   
    setInterval(move, 10);          

</script>
</head>

<body>

<div class="block" id="b0"></div>
<div class="block" id="b1"></div>
<div class="block" id="b2"></div>
<div class="block" id="b3"></div>
<div class="block" id="b4"></div>


<button onclick="mystart()"> start1 </button> <br />
<button onclick="mystop()" > stop1  </button> <br />
<form name="myform">
    speed:
    <input type="text" name="speed"  value="5" size="5" /> <br />
    rspeed:
    <input type="text" name="rspeed" value="2" size="5"  /> <br />
    <button onclick="mystart()"> start2 </button> <br />
    <button onclick="mystop()" > stop2  </button> <br />
</form>

</body>
</html>

单击表单内的按钮，然后单击表单外部的按钮可获得不同的结果。

1 个答案: