JavaScript定时器的正确打开方式

最新推荐文章于 2024-09-16 20:08:29 发布

miraclemeister

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量103

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/miraclemeister/article/details/131558611

版权

文章通过两个示例展示了JavaScript定时器(setInterval)在创建动态效果中的应用。案例1描述了一个箱子在指定区域内移动的动画，通过调整坐标实现。案例2解释了如何使两个实心圆围绕中心圆做圆周运动，利用三角函数计算圆的当前位置并更新CSS样式。

摘要由CSDN通过智能技术生成

JavaScript中的定时器可用于执行一些操作，一般指在指定的时间间隔内重复执行某一段代码或者在延迟一段时间后执行代码。

格式如下:

setInterval(function() {
  // 需要执行的代码
}, 时间间隔);

案例1 移动箱子

需求:将箱子从指定范围左上移动到右下

思路大致如下：

1.设置箱子移动的范围

   .f{
            width: 500px;
            height: 500px;
            position: relative;
            border: 1px solid black;
        }

2.设置箱子的大小

 .z{
            width: 100px;
            height: 100px;background-color: aquamarine;
            position: absolute;
            
        }

3.通过setInteval定时器设置箱子的移动方向

 <script>
        let x=0,y=0
        let z=document.getElementById('z')
    let timer=setInterval(()=>{
        if(x>=400||y>=400){
            clearInterval(timer)
        }
      x++
      y++
    z.style.top=y+`px`
    z.style.left=x+`px`
    },10)
   
    </script>

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f{
            width: 500px;
            height: 500px;
            position: relative;
            border: 1px solid black;
        }
        .z{
            width: 100px;
            height: 100px;background-color: aquamarine;
            position: absolute;
            
        }
    </style>
</head>
<body>
    <div class="f"></div>
    <div class="z" id="z" style="top: 0;"></div>
    <script>
        let x=0,y=0
        let z=document.getElementById('z')
    let timer=setInterval(()=>{
        if(x>=400||y>=400){
            clearInterval(timer)
        }
      x++
      y++
    z.style.top=y+`px`
    z.style.left=x+`px`
    },10)
   
    </script>
</body>
</html>

案例2 圆周运动

需求:使两个实心圆以中心圆的圆心为参照点进行圆周运动

思路如下:

1.设置实心圆和圆周的大小样式，确定实心圆和圆周的位置

<style>
        .r1{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            border-radius: 50%;
        }
        .r1>div{
            position: absolute;
        }
        .r2{
            width: 300px;
            height: 300px;
            border: 1px solid green;
            border-radius: 50%;
            top: 100px;
            left: 100px;
        }
        .r3{
            width: 100px;
            height:100px;
            border: 1px solid blue;
            left: 200px;
            top: 200px;
            border-radius: 50%;
        }
        .b1{
            width: 100px;
            height:100px;
           background-color:  blue;
            left: 0px;
            top: 200px;
            border-radius: 50%;
        }
        .b2{
            width: 100px;
            height:100px;
            background-color:  blue;
            left: 100px;
            top: 200px;
            border-radius: 50%;
        }
        
        
    
        
    </style>

2.设计实心圆运动轨迹的计算公式

假设圆的初始坐标为a（x0,y0），半径则为中心圆心与实心圆圆心之间的距离:

b1:50+100+50=200

b2:50+50=100

再利用三件函数公式求出圆的当前坐标(x,y)

  <script>
        function begin(){
          let r=200,x0=200,y0=200
          
          let b1=document.getElementById('b1')
          let t=0
          setInterval(()=>{
            t+=0.1
            let x=x0+r*Math.cos(t)
            let y=y0+r*Math.sin(t)
            b1.style.top=y+`px`
            b1.style.left=x+`px`
          },100)
        }
        function begin2(){
            let r=100,x0=200,y0=200
          
          let b2=document.getElementById('b2')
          let t=0
          setInterval(()=>{
            t+=0.1
            let x=x0+r*Math.cos(t)
            let y=y0+r*Math.sin(t)
            b2.style.top=y+`px`
            b2.style.left=x+`px`
          },100)
        }
        function begin1(){
            begin()
            begin2()
        }
    </script>

3.绑定开始按钮

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆周运动</title>
    <style>
        .r1{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            border-radius: 50%;
        }
        .r1>div{
            position: absolute;
        }
        .r2{
            width: 300px;
            height: 300px;
            border: 1px solid green;
            border-radius: 50%;
            top: 100px;
            left: 100px;
        }
        .r3{
            width: 100px;
            height:100px;
            border: 1px solid blue;
            left: 200px;
            top: 200px;
            border-radius: 50%;
        }
        .b1{
            width: 100px;
            height:100px;
           background-color:  blue;
            left: 0px;
            top: 200px;
            border-radius: 50%;
        }
        .b2{
            width: 100px;
            height:100px;
            background-color:  blue;
            left: 100px;
            top: 200px;
            border-radius: 50%;
        }
        
        
    
        
    </style>
</head>
<body>
    <div class="r1">
        <div id="b1" class="b1"></div>
        <div class="b2" id="b2"></div>
        <div class="r2"></div>
        <div class="r3"></div>
    </div>
    <script>
        function begin(){
          let r=200,x0=200,y0=200
          
          let b1=document.getElementById('b1')
          let t=0
          setInterval(()=>{
            t+=0.1
            let x=x0+r*Math.cos(t)
            let y=y0+r*Math.sin(t)
            b1.style.top=y+`px`
            b1.style.left=x+`px`
          },100)
        }
        function begin2(){
            let r=100,x0=200,y0=200
          
          let b2=document.getElementById('b2')
          let t=0
          setInterval(()=>{
            t+=0.1
            let x=x0+r*Math.cos(t)
            let y=y0+r*Math.sin(t)
            b2.style.top=y+`px`
            b2.style.left=x+`px`
          },100)
        }
        function begin1(){
            begin()
            begin2()
        }
    </script>
    <button onclick="begin1()">开始</button>
  
</body>
</html>