คัดลอกมันก่อนและดูเอฟเฟกต์การทำงาน สาระสำคัญที่ใช้คือเมธอด setInterval():
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<หัว>
<title>จาวาสคริปต์</title>
<สไตล์>
html
-
สีพื้นหลัง:สีเงิน;
-
.จุด1
-
ตำแหน่ง:แน่นอน;
ซ้าย:10px;
ด้านบน:40px;
-
.point2
-
ตำแหน่ง:แน่นอน;
ซ้าย:100px;
ด้านบน:40px;
-
.hr1
-
ตำแหน่ง:แน่นอน;
ด้านบน:60px;
-
</สไตล์>
<script type="text/JavaScript">
document.onmousedown = เลื่อนเมาส์;
document.onmouseup = เลื่อนเมาส์;
var ช่วงเวลากระบวนการ;
var โดยตรง = จริง;
ฟังก์ชั่นเมาส์ดาวน์ () {
IntervalProcess = setInterval("MovePoint()", 1);
-
ฟังก์ชั่นเมาส์อัพ () {
clearInterval(ช่วงกระบวนการ);
-
ฟังก์ชั่น MovePoint () {
ด้วย (document.getElementById("point1").style){
ถ้า (isNaN(parseInt(ซ้าย)))
ซ้าย = "10px";
อื่น {
document.getElementById("point2").style.left = "200px";
ถ้า (parseInt (ซ้าย) < 0)
โดยตรง = จริง;
ถ้า (parseInt(ซ้าย) > parseInt(document.getElementById("point2").style.left))
โดยตรง = เท็จ;
ถ้า (โดยตรง)
ซ้าย = parseInt(ซ้าย) + 1 + "px";
อื่น
ซ้าย = parseInt(ซ้าย) - 1 + "px";
-
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="point1"><font color=blue>a</font></div>
<div id="point2"><font color=red>b</font></div>
<ชม. />
</ร่างกาย>
</html>