ตัวอย่างโค้ดสำหรับการรับรู้การเคลื่อนไหวที่สม่ำเสมอใน JS

ผล:

ความคิด:

ใช้ตัวจับเวลา setInerval() เพื่อออกกำลังกาย ประเด็นสำคัญคือการตัดสินเพื่อเติมเต็มช่องว่างเมื่อมันหยุดในที่สุด

รหัส:

คัดลอกรหัสรหัสดังต่อไปนี้:

<หัว runat="เซิร์ฟเวอร์">

<title></title>

<style type="text/css">

#div1

-

ความกว้าง: 100px;

ความสูง: 100px;

พื้นหลัง: #0000FF;

ตำแหน่ง: แน่นอน;

ซ้าย: 800px;

ด้านบน: 100px;

-

#div200

-

ความกว้าง: 1px;

ความสูง: 400px;

พื้นหลัง: #FF0000;

ตำแหน่ง: แน่นอน;

ซ้าย: 200px;

-

#div500

-

ความกว้าง: 1px;

ความสูง: 400px;

พื้นหลัง: #FF0000;

ตำแหน่ง: แน่นอน;

ซ้าย: 500px;

-

</สไตล์>

<script type="text/javascript">

ฟังก์ชั่นย้าย (สิ้นสุด) {

var oDiv = document.getElementById('div1');

ตัวจับเวลา var = null;

จับเวลา = setInterval (ฟังก์ชั่น () {

var speed = (end - oDiv.offsetLeft) / 5; // รับความเร็วของการเคลื่อนที่ตามจุดสิ้นสุดและ offsetLeft

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //ปัดเศษ, ตำแหน่งทศนิยมจะกลายเป็นจำนวนเต็ม,

// ถ้า (oDiv.offsetLeft <= สิ้นสุด) {

// clearInterval(ตัวจับเวลา);

-

// อื่น {

// oDiv.style.left = oDiv.offsetLeft + ความเร็ว + 'px';

-

if (Math.abs(end - oDiv.offsetLeft) <= speed) { //เพราะตอนหยุดรถจะมีช่องว่างเล็กๆ น้อยๆ หรือไปไม่ถึงจุดที่กำหนดจนครบ จึงควรจะน้อยกว่าความเร็วของมัน

clearInterval(timer); //เมื่อระยะทางน้อยกว่าความเร็ว ให้หยุดการจับเวลา

oDiv.style.left = end + 'px'; //เติมช่องว่างหลังจากหยุด

-

อื่น {

oDiv.style.left = oDiv.offsetLeft + ความเร็ว + 'px'; // ย้าย DIV

-

}, 30)

-

</สคริปต์>

</หัว>

<ร่างกาย>

<input type="button" id="btn1" value="ไปที่ตำแหน่ง 500" onclick="move(500);"

<input type="button" id="btn2" value="ไปที่ตำแหน่ง 200" onclick="move(200);"

<div id="div1">

</div>

<div id="div200">200

</div>

<div id="div500">500

</div>

</ร่างกาย>