<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>緩沖運動2</title>
<style type="text/css">
a{display: block;}
input[type='button']{
margin-top: 5px;
}
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 200px;
cursor: pointer;
}
.div2{
width: 1px;
height: 1200px;
position: absolute;
left: 300px;
top: 0;
background-color: blueviolet;
/*用這個标杆，發現div1并沒有走到300的準确位置，原因是？*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
start();
}
}
function start(){
var oDiv = document.getElementById('div');
setInterval(function(){
var speed = Math.ceil((300-oDiv.offsetLeft)/10);
//300,是自己定義的他要停止的位置值，
//除以10 是必須的，這樣就能有效地成倍地降低速度值，注意，更改10的值，可以更改速度，這個10所在分母位置的數值越大，速度越小。
// var speed = Math.ceil((300-oDiv.offsetLeft)/10);
//如果整除不了，會有0.5px，有了小數點，計算機會直接删掉小數點後的數字，導緻物體運動不到準确位置。是以最後，用math的ceil方法，向上取整；floor方法，向下取整。
//因為向左走向右走是不确定的，是以用三元判斷的方法，如下：
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//但凡遇到緩沖運動，一定要取整
oDiv.style.left = oDiv.offsetLeft+speed+'px';
document.title = oDiv.offsetLeft+','+speed;//用以檢查、調試運動點是否正常
},30);
}
</script>
</head>
<body>
<p>關鍵點：</p>
<a>距離大，速度大</a>，，，
<a>距離小，速度小</a>
<a>距離和速度成正比</a>
<p style="color: brown;">關鍵點:遇到“緩沖運動”，一定要取整</p>
<input type="button" value="運動" id="btn" />
<div class="div" id="div"></div>
<div class="div2"></div>
</body>
</html> 課程來源路徑：智能社得開發課程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
越努力，越幸運；阿門。
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)