JavaScript melaksanakan terjemahan kereta berulang-alik

JavaScript ialah bahasa skrip dinamik yang biasa digunakan Bersama-sama dengan HTML dan CSS, ia dianggap sebagai tiga teknologi asas untuk pembangunan bahagian hadapan Web. Antaranya, JavaScript sering digunakan untuk mencapai kesan dinamik dalam halaman web, seperti kes klasik kereta yang bergerak ke sana ke mari. Berikut akan memperkenalkan cara menggunakan JavaScript untuk merealisasikan proses mendulang kereta ke sana ke mari.

1. Kod HTML

Pertama, kita perlu menentukan elemen div yang mengandungi kereta dan elemen butang untuk butang mula dan berhenti dalam HTML. Gaya di sini boleh ditetapkan menggunakan CSS dan tidak akan diperkenalkan secara terperinci di sini.

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

2. Kod JavaScript

Seterusnya, kita perlu mendapatkan elemen HTML di atas dan memanipulasinya menggunakan JavaScript. Kod berikut menunjukkan cara untuk mencapai kesan animasi kereta bergerak ke sana ke mari, dan cara mengawal mula dan berhenti animasi apabila butang diklik.

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

Dalam kod di atas, kami mula-mula mendapatkan elemen kereta dan butang dalam HTML, dan mentakrifkan beberapa pemalar dan pembolehubah. Seterusnya, kami menentukan fungsi animasi terjemahan translateAnimation(), yang menentukan arah pergerakan kereta berdasarkan kedudukan semasa kereta dan mengemas kini kedudukan kereta. Akhir sekali, kami melaksanakan kesinambungan animasi terjemahan kereta melalui pemasa, dan mengawal mula dan berhenti animasi dalam acara klik butang.

3. Contoh larian

Simpan kod HTML dan JavaScript di atas sebagai fail .html, dan buka fail dalam penyemak imbas, anda boleh melihat kereta itu bergerak ke belakang dan kesan animasi. Klik butang mula dan kereta akan bergerak ke kanan apabila kereta bergerak ke jarak yang telah ditetapkan, kereta akan bergerak ke kiri. Klik butang berhenti untuk menghentikan kereta daripada bergerak.

Dalam aplikasi praktikal, kita boleh melaraskan gaya, kelajuan bergerak dan jarak bergerak kereta mengikut keperluan untuk mencapai kesan animasi yang berbeza.

Perkara di atas ialah keseluruhan proses menggunakan JavaScript untuk merealisasikan terjemahan kereta berulang-alik Kes ini bukan sahaja dapat membantu pemula menguasai pengetahuan asas JavaScript, tetapi juga memberikan idea pelaksanaan kesan yang lebih dinamik untuk Web pembangunan bahagian hadapan.

Atas ialah kandungan terperinci JavaScript melaksanakan terjemahan kereta berulang-alik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!