JS勻速運動示範範例程式碼

作者：Eve Cole 更新時間：2025-01-17 12:00:02

複製程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<頭>

<title>勻速運動示範</title>

<樣式類型=“文字/css”>

<!--

#div1 {寬度：1px；高度：200px；背景顏色：黑色；位置：絕對；左：100px；上：70px；浮動：左}

#div1 跨距{位置：絕對；上：-15px}

#div2 {寬度：1px；高度：200px；背景顏色：午夜藍；位置：絕對；左：800px；上：70px；浮：左}

#div2 跨度{位置：絕對；頂部：-15px}

#div3 {寬度：1px；高度：200px；背景顏色：紫紅色；位置：絕對；左：300px；上：70px；浮動：左}

#div3 span {位置：絕對；上：-15px}

#div4 {寬度：1px；高度：200px；背景顏色：darkmagenta；位置：絕對；左：500px；上：70px；浮動：左}

#div4 跨度{位置：絕對；頂部：-15px}

#grap {寬度：200px；高度：200px；背景：紅色；位置：絕對；左：300px；上：74px；浮動：左；}

輸入{寬度：100px;左邊距：90px;}

-->

</風格>

<腳本類型=“文字/javascript”>

var 時間 ID

函數開始移動（目標）{

var oDiv=document.getElementById('grap')

清除間隔（時間ID）； //這個地方就是為了防止多次點擊速度加快的現象，很重要

speed=oDiv.offsetLeft<目標?8:-9;

timeId=setInterval(函數(){

if(Math.abs(oDiv.offsetLeft-target)<=6){

oDiv.style.left=target+'px'; //只要擬移動到接近目標點處就直接移動到目標點上，肉眼無法感知速度變化

清除間隔（時間ID）； document.title="目標"+oDiv.style.left;

}

別的{

oDiv.style.left=oDiv.offsetLeft+speed+'px';

}

},30);

}

</腳本>

</頭>

<正文>

</正文>

</html>