<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{20px;height:20px;background: red;border-radius: 50%;position: absolute;left:0;top:0;}
</style>
</head>
<body>
</body>
<script>
var t;
var speed=10;
var target=315;
var iNow=225;
var r=100;
var center=200;
document.addEventListener("click",dj,false)
function dj() {
clearInterval(t)
t=setInterval(function () {
if(iNow>=315){
clearInterval(t)
}
else{
var div=document.createElement("div")
div.className="box";
document.body.appendChild(div)
iNow+=speed;
console.log(iNow)
div.style.left = Math.cos( Math.PI/180*iNow ) * r + center + "px";
div.style.top=Math.sin(Math.PI/180*iNow)*r+center+"px";
}
},30)
}
</script>
</html>