Circular motion case

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .r1{
    
    
            width: 500px;
            height: 500px;
            border: 1px solid red;
            border-radius: 50%;
            position: relative;
        }
        .r1>div{
    
    
            position: absolute;
        }
        .r2{
    
    
            width: 300px;
            height: 300px;
            border: 1px solid green;
            border-radius: 50%;
            top: 100px;
            left: 100px;
        }
        .b1{
    
    
            width: 100px;
            height: 100px;
            background-color: rgb(17, 135, 220);
            border-radius: 50%;
            top: 200px;
            left: 0px;
        }
        .b2{
    
    
            width: 100px;
            height: 100px;
            background-color:#FFF8DC;
            border-radius: 50%;
            top: 200px;
            left: 100px;
        }
        .r3{
    
    
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            border-radius: 50%;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="r1">
        <div class="b1" id="b1"></div>
        <div class="b2"></div>
        <div class="r2"></div>
        <div class="r3"></div>
    </div>
    <button onclick="start1()">开始</button>
    
</body>
<script>
    //r表示运动轨迹的半径，x0,y0表示圆心的坐标
    let r=200,x0=250,y0=250;
    
    //获取b1蓝色小球
    let b1=document.getElementById('b1')
  
    // b1.style.top=200+'px'
    //定义x，y表示小球的运动轨迹坐标
    let x=50,y=50
    function start1(){
    
    
        // 上半⚪
        let sby=setInterval(()=>{
        x++
        y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
        b1.style.top=y-50 +'px'
        b1.style.left=x-50 +'px'
        if(x==450&&y==250){
    
    
            // alert('右顶点')
            //取消下半圆的定时器
            clearInterval(sby)
            let xbr=setInterval(()=>{
                x--
                y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
                b1.style.top=y-50 +'px'
                b1.style.left=x-50 +'px'
                if(x==50&&y==250){
    
    
                    //取消下半圆的定时器
                    clearInterval(xbr)
                    //开启上半圆定时器
                    start1()//递归
                }
            })
        }

        },1)

}

</script>
</html>
Circular motion case

Guess you like
