JavaScript implémente la traduction automobile dans les deux sens

JavaScript est un langage de script dynamique couramment utilisé avec HTML et CSS, il est considéré comme les trois technologies de base pour le développement Web front-end. Parmi eux, JavaScript est souvent utilisé pour obtenir des effets dynamiques dans les pages Web, comme le cas classique d'une voiture qui va et vient. Ce qui suit explique comment utiliser JavaScript pour réaliser le processus de panoramique de la voiture d'avant en arrière.

1. Code HTML

Tout d'abord, nous devons définir un élément div contenant la voiture et des éléments bouton pour les boutons de démarrage et d'arrêt en HTML. Les styles ici peuvent être définis à l'aide de CSS et ne seront pas présentés en détail ici.

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

2. Code JavaScript

Ensuite, nous devons obtenir l'élément HTML ci-dessus et le manipuler à l'aide de JavaScript. Le code suivant montre comment obtenir l'effet d'animation de la voiture se déplaçant d'avant en arrière, et comment contrôler le démarrage et l'arrêt de l'animation lorsque vous cliquez sur le bouton.

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

Dans le code ci-dessus, nous obtenons d'abord les éléments car et bouton en HTML, et définissons quelques constantes et variables. Ensuite, nous avons défini une fonction d'animation de traduction translateAnimation(), qui détermine la direction de déplacement de la voiture en fonction de la position actuelle de la voiture et met à jour la position de la voiture. Enfin, nous avons implémenté la poursuite de l'animation de translation de la voiture via un minuteur, et contrôlé le démarrage et l'arrêt de l'animation lors de l'événement clic sur le bouton. translateAnimation()，该函数根据小车当前位置判断小车的移动方向，并更新小车的位置。最后，我们通过计时器实现了小车平移动画的持续进行，并在按钮点击事件中控制了动画的开始和停止。

3. 示例运行

将上述HTML和JavaScript代码保存为.html

Exemple d'exécution

Enregistrez le code HTML et JavaScript ci-dessus en tant que fichier .html et ouvrez le fichier dans le navigateur, vous pouvez voir la voiture reculer et-vient effet d'animation. Cliquez sur le bouton de démarrage et la voiture se déplacera vers la droite ; lorsque la voiture atteint la distance prédéfinie, la voiture se déplacera vers la gauche. Cliquez sur le bouton d'arrêt pour empêcher la voiture de bouger.

🎜Dans les applications pratiques, nous pouvons ajuster le style, la vitesse de déplacement et la distance de déplacement de la voiture selon les besoins pour obtenir différents effets d'animation. 🎜🎜Ce qui précède représente l'ensemble du processus d'utilisation de JavaScript pour réaliser la traduction aller-retour de la voiture. Ce cas peut non seulement aider les débutants à maîtriser les connaissances de base de JavaScript, mais également fournir des idées de mise en œuvre d'effets plus dynamiques pour le développement Web front-end. . 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!