圆周运动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
position: absolute;
width: 30px;
height: 30px;
background-color: red;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
var btn = document.getElementById("btn1");
var X = 500;
var Y = 400;
var r = 100;
var i = 0;
btn1.onclick = function() {
setmove()
};
function setmove() {
setInterval(function() {
i++;
var radian = i * Math.PI / 180;
var a = Math.sin(radian) * r;
var b = Math.cos(radian) * r;
oDiv.style.left = X + a + 'px';
oDiv.style.top = Y - b + 'px';
var node = document.createElement("div");
node.style.width = "5px";
node.style.height = "5px";
node.style.backgroundColor = 'black';
node.style.position = 'absolute';
node.style.left = oDiv.offsetLeft + 'px';
node.style.top = oDiv.offsetTop + 'px';
document.body.appendChild(node);
}, 10);
}
}
</script>
</head>
<body>
<div id='div1'></div>
<button id="btn1">111</button>
</body>
</html>