<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #ha{ width:500px; height:500px; border:red 1px solid; border-radius:50%; position:relative; margin:100px auto; } #circle{ width:20px; height:20px; background:blue; position:absolute; border-radius:50%; top:-10px; left:240px; } </style> </head> <body> <div id="ha"> <div id="circle"> </div> </div> </body></html><script> var circle=document.getElementById("circle"); var t=null; var num=0; t=setInterval(function(){ num++ circle.style.left=250+250*Math.sin(num*(Math.PI/180))-10+"px" circle.style.top= 250-250*Math.cos(num*(Math.PI/180))-10+"px" },100)</script>