<!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=)