JavaScript简单运动封装

最新推荐文章于 2022-05-08 16:00:06 发布

FourAm_Godv_

最新推荐文章于 2022-05-08 16:00:06 发布

阅读量145

点赞数

文章标签：运动封装

本文链接：https://blog.csdn.net/FourAm_Godv_/article/details/100185745

版权

运动基础

在JavaScript中，我们怎么能让一个页面元素动起来？
首先，我们需要了解的是，在JavaScript中如何让一个页面元素动起来。
我们先来实现一个简单的功能，当我们点击按钮之后，让一个元素动起来。并且到达500的边界之后立刻停止下来。

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top:100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <button id="btn">点击运动</button>
    <div id="d1"></div>
</body>
<script>
    // 点击按钮,让div横向的运动起来
    
    // 1. 获取元素
    let oBtn = document.getElementById('btn');
    let oDiv = document.getElementById('d1');
    let iTimer = null;
    // 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器 
    oBtn.onclick = ()=>{
        
        iTimer = setInterval(()=>{
            // 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离
            // oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断
            if (oDiv.offsetLeft === 500) {
                // 清除定时器  
                clearInterval(iTimer);
            }else { // 没有到达边界才能继续运动
                oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; 
            }
        },30);
        
        
    };
</script>

在上面的代码中，我们点击按钮之后，元素已经可以直接进行移动，但是却存在一个问题，什么问题呢？

当我们点击按钮之后，元素始终以10px的匀速进行运动，到达500的临界然后停止。但是我们的问题是，速度可能会变，例如将速度变为7px，就不能够
准确的到达500的临界值。

例如：

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top:100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <button id="btn">点击运动</button>
    <div id="d1"></div>
</body>
<script>
    // 点击按钮,让div横向的运动起来
    
    // 1. 获取元素
    let oBtn = document.getElementById('btn');
    let oDiv = document.getElementById('d1');
    let iTimer = null;
    // 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器 
    oBtn.onclick = ()=>{
        
        iTimer = setInterval(()=>{
            // 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离
            // oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断
            if (oDiv.offsetLeft === 500) {
                // 清除定时器  
                clearInterval(iTimer);
            }else { // 没有到达边界才能继续运动
                oDiv.style.left = oDiv.offsetLeft + 7 + 'px';  // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动
            }
        },30);
        
        
    };
</script>

上面的代码当中，因为临界值不能够被速度整除，所以，最终元素始终达到不了临界值，那么元素就没有办法在到达临界值时停止。

同时在上面的代码中的另外一个问题是，当我们每点击一次运动按钮，元素的速度就会变得更快，原因很简单，就是我们设置的定时器发生了累加。

那么该如何解决定时器累加的问题呢？
我们可以在每次开始运动之前先清楚一次定时器

oBtn.onclick = ()=>{
clearInterval(iTimer);

        iTimer = setInterval(()=>{
            // 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离
            // oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断
            if (oDiv.offsetLeft === 500) {
                // 清除定时器  
                clearInterval(iTimer);
            }else { // 没有到达边界才能继续运动
                oDiv.style.left = oDiv.offsetLeft + 7 + 'px';  // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动
            }
     },30);  };

总结：在上面的代码中，是我们一般让一个元素运动起来的基本流程。下面进行一个简单的总结：

首先是存在的问题：处于匀速运动的元素没有办法进行在不整除的情况下在临界点停止。
在上面的代码中，可以将整个过程大致分为三个步骤：
清除定时器，保证只有一个定时器在执行
开启定时器
开始运动(需要同时加入一个判断，以便在需要的时候或者满足某个要求时停止运动)

简单运动的封装

为了让我们上面的代码可以具备更高的复用性，下面我们把上面的代码进行一个简单的封装。

示例：

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top:100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <button id="btn">点击运动</button>
    <div id="d1"></div>
</body>
<script>
    // 点击按钮,让div横向的运动起来
    
    // 1. 获取元素
    let oBtn = document.getElementById('btn');
    let oDiv = document.getElementById('d1');
    let iTimer = null;
    // 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器 
    oBtn.onclick = ()=>{    
        startMove(); 
        // 将运动相关的内容全部放到startMove这个函数中，然后调用既可以让元素进行运动
        function startMove() {
            clearInterval(iTimer);
            iTimer = setInterval(()=>{
                if (oDiv.offsetLeft === 500) {
                    // 清除定时器  
                    clearInterval(iTimer);
                }else { // 没有到达边界才能继续运动
                    oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动
                }
            },30);
        }
    };
</script>

FourAm_Godv_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单运动封装

运动基础在JavaScript中，我们怎么能让一个页面元素动起来？首先，我们需要了解的是，在JavaScript中如何让一个页面元素动起来。我们先来实现一个简单的功能，当我们点击按钮之后，让一个元素动起来。并且到达500的边界之后立刻停止下来。<head> <meta charset="utf-8"> <title></title&...
复制链接

扫一扫