Объект не движется

Question

Квадрат должен перемещаться по кругу после нажатия "запустить" и остановиться на месте после нажатия "стоп".

Изначально он не двигается.

Подскажите, что не так, как исправить?

    var t=0;
    st=false //остановить процесс
    
    function Start_stop()
    {   if(st)
       {    window.clearInterval(proc)    //остановиться
            st=false
            //заменить надпись на кнопке с именем В1
            document.all.B1.innerHTML="Запустить"  
       }
            else   //двигаться (запустить процесс с именем proc)
            {   proc=window.setInterval("move()",10)  
               st=true
               //заменить надпись на кнопке с именем В1
               document.all.B1.innerHTML="Стоп" 
            }
    }
    
    function move()
    {   
        var square = document.getElementById("square");
        var R = 5;
        var dx = R * Math.cos(t);
        var dy = R * Math.sin(t);
        
        var y = parseFloat(square.style.top);
        var x = parseFloat(square.style.left);

        square.style.top = y + dy + "px";
        square.style.left = x + dx + "px";

        t += 0.02;
        
    }

<BUTTON ID="B1" onclick=Start_stop() STYLE="position:absolute; left:300;top:5">Запустить</button>
<div ID="square" style="top:50px; left:50px; position: absolute; background-color:red"></div>

Answer 1

Он вполне себе движется.

просто вы забыли установить ширину и высоту для самого объекта, который будет бегать по кругу. В итоге вы по кругу гоняли пустой див шириной в 0 пикселей и высотой в 0 пикселей.

Просто установите стили объекта

#square{
    width: 20px;
    height: 20px;
}

Плюс я чуть уменьшил радиус

    var R = 2;

чтобы в сниппете выполнение нормально отображалось и чуть поправил стартовое положение элемента.

<div ID="square" style="top:10px; left:125px; position: absolute; background-color:red"></div>

 var t=0;
    st=false //остановить процесс
    
    function Start_stop()
    {   if(st)
       {    window.clearInterval(proc)    //остановиться
            st=false
            //заменить надпись на кнопке с именем В1
            document.all.B1.innerHTML="Запустить"  
       }
            else   //двигаться (запустить процесс с именем proc)
            {   proc=window.setInterval("move()",10)  
               st=true
               //заменить надпись на кнопке с именем В1
               document.all.B1.innerHTML="Стоп" 
            }
    }
    
    function move()
    {   
        var square = document.getElementById("square");
        var R = 2;
        var dx = R * Math.cos(t);
        var dy = R * Math.sin(t);
        
        var y = parseFloat(square.style.top);
        var x = parseFloat(square.style.left);

        square.style.top = y + dy + "px";
        square.style.left = x + dx + "px";

        t += 0.02;
        
    }

#square{
    width: 20px;
    height: 20px;
    border-radius: 10px;

}

<BUTTON ID="B1" onclick=Start_stop() STYLE="position:absolute; left:300;top:5">Запустить</button>
<div ID="square" style="top:10px; left:125px; position: absolute; background-color:red"></div>

БЛОГ НА HUSL

Объект не движется

Ответы (1 шт):