JavaScript实现小车平移来回

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

// 获取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);
}