圆周运动

最新推荐文章于 2023-07-25 14:23:18 发布

wuko.0

最新推荐文章于 2023-07-25 14:23:18 发布

阅读量289

点赞数 1

分类专栏： js css 文章标签： javascript css

本文链接：https://blog.csdn.net/qq_40586654/article/details/81264261

版权

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏



<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>圆周运动</title>

<style>



#box1{

width:10px;

height:10px;

position: absolute;

background:#f00;

left:600px;

top:300px;

}

.box0{

height:2px;

width:2px;

background:#000;

position:absolute;

}

</style>

<script>

window.onload=function(){

var oBox1=document.getElementById('box1');

var r=200;

var num=0;

var x=oBox1.offsetLeft - r;

var y=oBox1.offsetTop;



setInterval(function(){

num++;

a=Math.sin(num*(Math.PI/180))*r;

b=Math.cos(num*(Math.PI/180))*r;

var div = document.createElement('div');//创建一个div标签

div.className = 'box0';//将className 为box0的样式赋给div

document.body.appendChild(div);//添加到body



oBox1.style.left = div.style.left = x+b+'px';

oBox1.style.top = div.style.top = y+a+'px';

},50);

}



</script>

</head>

<body>

<div id="box1"></div>

</body>

</html>