Pertama -tama mari kita lihat kode gerakan seragam sebelumnya. Jenis bug apa yang akan terjadi setelah memodifikasi kecepatan. Berikut adalah dua tolok ukur untuk pengujian
Salinan kode adalah sebagai berikut:
<type style = "text/css">
#Div1 {
Lebar: 100px;
Tinggi: 100px;
Posisi: Absolute;
Latar Belakang: Merah;
Atas: 50px;
Kiri: 600px;
}
#Div2 {
Lebar: 1px;
Tinggi: 300px;
Posisi: Absolute;
Kiri: 300px;
TOP: 0;
Latar Belakang: Hitam;
}
#Div3 {
Lebar: 1px;
Tinggi: 300px;
Posisi: Absolute;
Kiri: 100px;
TOP: 0;
Latar Belakang: Hitam;
}
</tyle>
<type skrip = "Teks/JavaScript">
var time = null;
function startMove (itarget) {
var odiv = document.geteLementById ("div1");
ClearInterval (waktu);
waktu = setInterval (function () {
var speed = 0;
if (odiv.offsetleft <itarget) {
Kecepatan = 7;
} kalau tidak {
Kecepatan = -7;
}
// Sebenarnya, ada masalah dengan situasi ini
odiv.style.left = odiv.offsetleft + kecepatan + 'px';
}, 30)
}
</script>
</head>
<body>
<input type = "tombol" id = "btn" value = "to 100" ontClick = "startMove (100)" />
<input type = "tombol" id = "btn" value = "to 300" onclick = "startMove (300)" />
<Div id = "Div1">
</div>
<Div id = "Div2">
</div>
<Div id = "Div3">
</div>
</body>
Bahkan, jika kode seperti itu mengubah kecepatan ke angka ganjil seperti 7, dan mencapai titik target, itu adalah bilangan bulat, yang akan menyebabkan bug yang gagal mencapai titik target atau melampaui titik target.
Lalu mengapa ini terjadi?
Bahkan, ketika dia mencapai titik target, dia tidak dapat secara akurat mencapai titik target. Jika titik target adalah 100, dan 7 berjalan setiap kali, saat ini, ia melewati titik target atau gagal.
Tidak pernah mencapai titik target. Faktanya, ini seperti membantu buffering sebelumnya.
Jadi, bagaimana Anda menghitung bahwa Anda telah mencapai titik target?
Misalnya: Jika Anda naik taksi ke tempat tertentu, pengemudi pasti akan berhenti di sana 10 meter dan 20 meter jauhnya, dan bahkan jika Anda tiba. Tidak mungkin untuk meminta mobil untuk menempelkannya di tempat itu dan berhenti.
Jadi, pada kenyataannya, programnya sama. Selama jarak antara objek dan titik target mendekati batas tertentu, kami tidak perlu lebih dekat, dan kami pikir kami telah mencapainya.
Mari kita lihat kode yang dimodifikasi:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var time = null;
function startMove (itarget) {
var odiv = document.geteLementById ("div1");
ClearInterval (waktu);
waktu = setInterval (function () {
var speed = 0;
if (odiv.offsetleft <itarget) {
Kecepatan = 7;
} kalau tidak {
Kecepatan = -7;
}
if (math.abs (itarget - odiv.offsetleft) <= 7) {
ClearInterval (waktu);
odiv.style.left = itarget+'px';
} kalau tidak {
odiv.style.left = odiv.offsetleft + kecepatan + 'px';
}
}, 30)
}
</script>
Izinkan saya menjelaskan: Mengapa Anda perlu menggunakan Math.ABS untuk mendapatkan nilai absolut di sini?
Alasannya sederhana, karena kecepatannya mungkin positif atau negatif.
Sekarang biarkan jarak antara target dan objek sekecil 7, maka akan ada di sana. Mengapa 7? Karena dia memiliki kurang dari 7 latihan lain kali. Pada saat ini, kami telah mencapai titik target.
Sekarang masalahnya akan datang lagi, dan dia tidak berhenti tepat pada titik target dalam menulis dengan cara ini. Jadi kami menambahkan kalimat sederhana, langsung dibiarkan sama dengan titik target. odiv.style.left = itarget+'px';
Bahkan, ada kurang dari 7 dari mereka terakhir kali, tetapi semua orang tahu bahwa program berjalan terlalu cepat dan mata manusia tidak dapat melihatnya. Senyum hangat
Tidak akan ada masalah saat ini. Berkedip
Ini adalah kondisi berhenti untuk gerakan seragam. Lalu seorang teman bertanya, mengapa latihan buffering tidak begitu merepotkan?
Karena kecepatannya telah berubah dan semakin kecil dan lebih kecil, sampai akhir ia bahkan mencapai 1, dan pasti tidak akan ada masalah seperti itu ketika bergerak maju langkah demi langkah.