"失精"引起的一个动画小bug；
引子
上周写了一个DOM常用方法库，今天拿来写动画方便的不要不要的，但是在写一个定时单方向匀速运动的动画demo时，竟然出现了滚动条（元素实际运动距离大于浏览器窗口距离了）；诡异的是，当我把DIV的边框去掉或者改变边框的值时，就正常了；
刚开始怀疑，设置停止条件有问题，仔细检查了一下条件没有问题，于是怀疑是“失精”引起的问题，在控制台输入step，果然是一个最大位数的小数，改变border值后，便可以除尽了；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指定时间单方向匀速运动</title>
<script type="text/javascript" src="../units2.js"></script>
<style type="text/css">
* {
margin : 0;
padding: 0;
}
#div1 {
margin: 0;
width: 150px;
height: 150px;
background: red;
border: 5px solid green;//妈妈就是它欺负我
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="div1">1</div>
<script type="text/javascript">
//核心原理1：让left值不断++;
var oDiv1 = document.getElementById("div1");
//求出最大距离
var maxLeft = units.win("clientWidth")- oDiv1.offsetWidth;
//求步长
var duration = 2000,frequency = 10,step = (maxLeft/2000)*10;
//设置定时器
curLeft = 0;
var timer = window.setInterval(function(){
if(curLeft>=maxLeft){
window.clearInterval(timer);
return;
}
nextLeft = curLeft+=step;
units.setCss(oDiv1,"left",nextLeft);
},10)
</script>
</body>
</html>
总结
1.为了避免失精问题，实现动画时（以及需要对某个数进行多次累加时），对步长进行提前计算，近可能是整数；
2.不存在毫无意义的付出，所学到的每一份知识，都会在今天明天或者后天以这样或者那样的形式回报给你，作为非计算机专业，失精问题是我在慕课网的大学计算机基础课学到的，感谢计算机行业的低壁垒；
3.下阶段一定要把基础补上，做最好的自己，差距从时间里拼；