                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么使用的時向上取整，得到的確實向下取整？

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>多物體運動</title>
????<style>
?ul?li{
????????????width:?100px;
?height:?50px;
?background-color:?yellow;
?margin-bottom:?10px;
?list-style:?none;
?}
????</style>
????<script>
?window.onload=function?()?{
????????????var?oli=document.getElementsByTagName("li");
?for(var?i=0;i<oli.length;i++){
????????????????oli[i].timer=null;
?oli[i].onmouseover=function?()?{
????????????????????startmove(this,120);
?};
?oli[i].onmouseout=function?()?{
????????????????????startmove(this,100);
?}
????????????}
????????????function?startmove(obj,itarget)?{
????????????????clearInterval(obj.timer);
?obj.timer=setInterval(function?()?{
???????????????????//?var?speed=(itarget-obj.offsetWidth)/8;
?var?speed=speed>0?Math.ceil((itarget-obj.offsetWidth)/8):Math.floor((itarget-obj.offsetWidth)/8);
?console.log((itarget-obj.offsetWidth)/8);
?console.log('speed:'+speed+'width:'+obj.offsetWidth);
?if(obj.offsetWidth==itarget){
????????????????????????clearInterval(obj.timer);
?}else{
????????????????????????obj.style.width=obj.offsetWidth+speed+"px";
?}
????????????????},30)
????????????}
????????}
????</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>

在后臺consol.log查看后和注釋掉的 speed得到的結果不一樣，即如果用speed則正常，如果使用Math.ceil((itarget-obj.offsetWidth)/8)則得到的結果卻是向下取整，即第一個值為120-100=2.5 ?ceil后應該是3但是在后臺看確實2？！費解，請大神答疑，十分感謝