JavaScript实现小车平移来回

时间：2023-05-18 08:02

JavaScript是一种常用的动态脚本语言，与HTML和CSS一起被视为Web前端开发的三大基础技术。其中，JavaScript经常用于实现网页中的动态效果，如小车平移来回这一经典案例。下面将介绍如何使用JavaScript实现小车平移来回的过程。

HTML代码

首先，我们需要在HTML中定义一个包含小车的div元素，以及开始和停止按钮的按钮元素。这里的样式可以使用CSS进行设置，此处不做具体介绍。

<div id="car"></div><button id="startBtn">开始</button><button id="stopBtn">停止</button>

JavaScript代码

接下来，我们需要获取上述HTML元素，并使用JavaScript对其进行操作。下面的代码演示了如何实现小车平移来回的动画效果，以及如何在点击按钮时控制动画的开始和停止。

// 获取HTML元素var car = document.getElementById("car");var startBtn = document.getElementById("startBtn");var stopBtn = document.getElementById("stopBtn");// 定义变量和常量var speed = 5; // 小车移动速度（单位：像素）const distance = 200; // 小车移动的距离（单位：像素）// 定义平移动画函数function translateAnimation() {    // 获取小车当前位置    var currentPosition = parseInt(car.style.left);    // 判断小车移动方向    if (currentPosition < distance) {        // 向右移动        currentPosition += speed;    } else {        // 向左移动        currentPosition -= speed;    }    // 更新小车位置    car.style.left = currentPosition + "px";}// 定义计时器var timer;// 开始按钮点击事件startBtn.onclick = function() {    // 启动计时器    timer = setInterval(translateAnimation, 20);}// 停止按钮点击事件stopBtn.onclick = function() {    // 停止计时器    clearInterval(timer);}

上述代码中，我们首先获取了HTML中的小车和按钮元素，并定义了一些常量和变量。接着，我们定义了一个平移动画函数translateAnimation()，该函数根据小车当前位置判断小车的移动方向，并更新小车的位置。最后，我们通过计时器实现了小车平移动画的持续进行，并在按钮点击事件中控制了动画的开始和停止。