JavaScript implements car translation back and forth

JavaScript is a commonly used dynamic scripting language. Together with HTML and CSS, it is regarded as the three basic technologies for Web front-end development. Among them, JavaScript is often used to achieve dynamic effects in web pages, such as the classic case of a car moving back and forth. The following will introduce how to use JavaScript to realize the process of panning the car back and forth.

1. HTML code

First, we need to define a div element containing the car, and button elements for the start and stop buttons in HTML. The styles here can be set using CSS and will not be introduced in detail here.

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

2. JavaScript Code

Next, we need to get the above HTML element and manipulate it using JavaScript. The following code demonstrates how to achieve the animation effect of the car moving back and forth, and how to control the start and stop of the animation when the button is clicked.

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

In the above code, we first obtain the car and button elements in HTML, and define some constants and variables. Next, we defined a translation animation function translateAnimation(), which determines the moving direction of the car based on the current position of the car and updates the position of the car. Finally, we implemented the continuation of the car's translation animation through a timer, and controlled the start and stop of the animation in the button click event.

3. Example run

Save the above HTML and JavaScript code as a .html file, and open the file in the browser to see The animation effect of the car moving back and forth. Click the start button and the car will move to the right; when the car moves to the preset distance, the car will move to the left. Click the stop button to stop the car from moving.

In practical applications, we can adjust the style, moving speed and moving distance of the car as needed to achieve different animation effects.

The above is the whole process of using JavaScript to realize the translation of the car back and forth. This case can not only help beginners master the basic knowledge of JavaScript, but also provide more dynamic effect realization ideas for Web front-end development.

The above is the detailed content of JavaScript implements car translation back and forth. For more information, please follow other related articles on the PHP Chinese website!