圆周运动

最新推荐文章于 2024-08-04 18:58:23 发布

原创最新推荐文章于 2024-08-04 18:58:23 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

7 篇文章

订阅专栏

本文通过HTML5和JavaScript实现了一个简单的圆周运动效果。页面中有一个红色的小球沿着虚拟圆周路径移动，并在路径上留下黑色小点痕迹。通过调整Math.sin和Math.cos函数中的参数可以改变运动的速度和轨迹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



<!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>