使用前端三件套制作简易圆周运动（JS，HTML，CSS）

qq_75222206

已于 2023-07-05 17:38:14 修改

阅读量519

点赞数

文章标签：前端 javascript html

于 2023-07-05 17:32:27 首次发布

本文链接：https://blog.csdn.net/qq_75222206/article/details/131558343

版权

什么是JavaScript

首先在制作圆周运动动画时，我们需要了解一种前端语言JavaScript

JavaScript是一种广泛使用的编程语言，用于为网页添加交互性和动态功能。它可以在网页上执行各种操作，如验证表单、创建动画效果、处理用户输入等。JavaScript是一种脚本语言，可以直接嵌入到HTML代码中，并由Web浏览器解释和执行。它是现代Web开发中不可或缺的一部分。

JavaScript的特点是什么

JavaScript的特点包括：
1. 简单易学：相对于其他编程语言，JavaScript语法简单、易于理解和学习。
2. 客户端脚本语言：JavaScript主要用于前端开发，可以直接在网页上运行，为用户提供交互性和动态功能。
3. 跨平台性：JavaScript可以在各种操作系统和设备上运行，包括桌面计算机、移动设备和嵌入式系统。
4. 动态性：JavaScript是一种动态类型的语言，变量的类型可以在运行时自动确定，使得开发更加灵活。
5. 强大的功能和库：JavaScript拥有丰富的内置功能和各种第三方库，可以实现复杂的任务和功能，如DOM操作、表单验证、动画效果等。
6. 与HTML和CSS的无缝集成：JavaScript可以与HTML和CSS紧密结合，实现网页的完整交互和样式控制。
7. 支持面向对象编程：JavaScript支持面向对象编程的特性，如封装、继承和多态，使得代码的组织和复用更加便捷。
总的来说，JavaScript是一种强大而灵活的编程语言，为Web开发提供了丰富的功能和交互性。

了解完JavaScript的概念以及特点之后，我们可以使用该编程语言首先前端网页的动态化。

使用三件套实现圆圈的圆周运动

使用JavaScript完成动作函数设置，css完成区域显示，html则为上述两种技术提供了基本的框架处理。

下面是成果展示

实现思路

首先用css和html构成基本圆形框架。使用border-radius实现方块区域圆形化，border-color实现颜色不统一（便于观察），利用top和left属性控制边框的距离。在实现构造的同时，注意子类和父类的相对关系。

下面是头部和身体部分代码实现

<!DOCTYPE html>
<head>
 <style>
   .r1{
    width:500px;
    height:500px;
    border:1px solid red;
    border-radius:50%;
    position:relative;
   }
   .r1>div{
    position: absolute;
   }
   .r2{
    width:300px;
    height:300px;
    border:1px solid yellowgreen;
    border-radius:50%;
    top:100px;
    left:100px;
   }
   .r3{
    width:100px;
    height:100px;
    border-radius: 50%;
    border:1px solid green;
    top:200px;
    left:200px;
   }
   .b1{
    width:100px;
    height:100px;
    background-color: blue;
    border-radius: 50%;
    top:200px;
    left:0px;
   }
   .b2{
    width:100px;
    height:100px;
    background-color: rebeccapurple;
    border-radius: 50%;
    top:200px;
    left:100px;
   }
 </style>
</head>
<body>
   <div class="r1">
     <div class="b1" id="b1">

     </div>
     <div class="b2" id="b2">

     </div>
     <div class="r2"></div>
     <div class="r3"></div>
   </div>
</body>
</html>

结果展示

基本图形与框架已经完成，那么该给外面的小球完成一个圆周动作设置。这个时候我们可以使用JavaScript的自定义函数以及setinterval完成设置。

在设置圆周运动过程中，我们知道圆的公式为（x-a）^2+(y-b)^2=r^2。利用这个思路，控制好top与left距离，便可以完成圆周运动的动作设置。（tips：x与y的距离不能忽略半径的影响。因为left是圆到最左边的距离，而圆心的距离比其多出一个半径，同理top和y的关系也是如此，所以最后的x与y要减去半径）

代码展示

<script>
    //r表示运动轨迹的半径，x0，y0表示圆形坐标
    let r=200,x0=250,y0=250;
    //获取b1蓝色小球
    let b1=document.getElementById('b1')

    //定义x,y表示小球的运动轨迹
    let x=50,y=0;
 function start1(){
   let sbr= setInterval(() => {
        x++
        y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
        b1.style.top=y-50+'px'
        b1.style.left=x-50+'px'
    
    }, 0.001);
 }
</script>

结果展示

然而，上述结果的小球跑出一半就脱离轨道直线运动，这是什么原因造成的呢？

分析：上述JavaScript代码中关于圆的轨迹运动没有考虑到下半部分的情况，导致圆运动一半轨迹后直接直线运动。

解决方法：需要手写个下半部分轨迹的运动方法，为了保持小圆球能够持续运动，我们还应该讲手写的函数进行递归调用。在写函数过程中，将下半部分与上半部分更好的结合，我们需要舍弃小球直线运动的函数，这时候需要使用clearinterval来进行清除（即取消上半圆的定时器）取消过程中，应当加限制条件限制下半圆的多余运动部分

代码展示：

<script>
    //r表示运动轨迹的半径，x0，y0表示圆形坐标
    let r=200,x0=250,y0=250;
    //获取b1蓝色小球
    let b1=document.getElementById('b1')

    //定义x,y表示小球的运动轨迹
    let x=50,y=0;
 function start1(){
   let sbr= setInterval(() => {
        x++
        y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
        b1.style.top=y-50+'px'
        b1.style.left=x-50+'px'
        if(x==450&&y==250){
            //取消上半圆的定时器
            clearInterval(sbr)
            //开启下半圆的定时器,setInterval定时器
            let xbr=setInterval(() => {
                x--
                y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
                b1.style.top=y-50+'px'
                b1.style.left=x-50+'px'
                if(x==50&&y==250){
                    clearInterval(xbr)
                    start1()
                }
            });
        }
    }, 0.001);
 }
</script>

全代码展示

<!DOCTYPE html>
<head>
 <style>
   .r1{
    width:500px;
    height:500px;
    border:1px solid red;
    border-radius:50%;
    position:relative;
   }
   .r1>div{
    position: absolute;
   }
   .r2{
    width:300px;
    height:300px;
    border:1px solid yellowgreen;
    border-radius:50%;
    top:100px;
    left:100px;
   }
   .r3{
    width:100px;
    height:100px;
    border-radius: 50%;
    border:1px solid green;
    top:200px;
    left:200px;
   }
   .b1{
    width:100px;
    height:100px;
    background-color: blue;
    border-radius: 50%;
    top:200px;
    left:0px;
   }
   .b2{
    width:100px;
    height:100px;
    background-color: rebeccapurple;
    border-radius: 50%;
    top:200px;
    left:100px;
   }
 </style>
</head>
<body>
   <div class="r1">
     <div class="b1" id="b1">

     </div>
     <div class="b2" id="b2">

     </div>
     <div class="r2"></div>
     <div class="r3"></div>
   </div>
   <button onclick="start1()">开始</button>
</body>
<script>
    //r表示运动轨迹的半径，x0，y0表示圆形坐标
    let r=200,x0=250,y0=250;
    //获取b1蓝色小球
    let b1=document.getElementById('b1')

    //定义x,y表示小球的运动轨迹
    let x=50,y=0;
 function start1(){
   let sbr= setInterval(() => {
        x++
        y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
        b1.style.top=y-50+'px'
        b1.style.left=x-50+'px'
        if(x==450&&y==250){
            //取消上半圆的定时器
            clearInterval(sbr)
            //开启下半圆的定时器,setInterval定时器
            let xbr=setInterval(() => {
                x--
                y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
                b1.style.top=y-50+'px'
                b1.style.left=x-50+'px'
                if(x==50&&y==250){
                    clearInterval(xbr)
                    start1()
                }
            });
        }
    }, 0.001);
 }
</script>
</html>

最终效果