下面用javascript实现的缓冲运动效果,是否存在让运动物体越过目标位置的bug?
代码及运行效果也可在 jsbin 中查看:https://jsbin.com/tilolazaci/1/edit?html,js,output


其中主要的代码是这两行:
//表达的意思是每调用一次定时器,box移动的距离为剩下路程的1/10。
var speed = (iTarget - box.offsetLeft)/10;

//对speed向上取整,以确保.box能准确运行到目标位置,如果没有这行代码,.box会在到达目标位置前停止运动.
//但如果添加了这行代码,是否会产生让运动物体越过目标位置的bug呢?
speed = Math.ceil(speed); 


疑问:是否存在向上取整后,最终得到的speed值大于剩余路程(iTarget - box.offsetLeft)的值的可能性? 
如果会大于,那么.box运动的距离会超过目标位置


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
  <input type="button" class="run" value="开始运动" />
  <!-- 运动物体 -->  
  <div class="box"></div>
  <!-- 目标位置-->
  <div class="target"></div>
</body>
</html>


var box = document.querySelector(".box"),
    run = document.querySelector(".run");

run.addEventListener("click",function(){
    setInterval(function(){
    //目标位置
    var iTarget = 300; 
    var speed = (iTarget - box.offsetLeft)/10;
        //如果没有对speed向上取整时,.box无法准确到达目标点 
        speed = Math.ceil(speed);
    box.style.left = box.offsetLeft + speed + "px";    
    },30);
});


/* 运动物体 */
.box{
    position:absolute;
    left:0;
    top:50px;
    width:100px;
    height:100px;
    background-color: red;
}
/* 目标位置 */
.target{
    position:absolute;
    left:300px;
    top:0;
    width:1px;
    height:300px;
    background-color: blue;
}

1个回答

不会越过目标位置,因为box.offsetLeft获取的只能是整数。
当box.offsetLeft等于目标位置(300)时,speed是0,就是停止了。
其次box.offsetLeft最大也只有299,不会是299.5之类的有小数的。
299+1正好300

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

2
javascript里怎么在文字标签上实现颜色的选中,类似excel的格子的效果
4
javascript如何用数组实现冒泡排序的算法,不用sort函数怎么实现?
6
javascript中怎么实现求一个数组的中位数,求中位数的方式怎么实现的呢?
2
请问如何使用javascript的map语句实现不定多个数组的相加?相加怎么用map实现?
2
javascript怎么实现判断页面上的链接的功能,判断链接怎么用js语言实现呢?
9
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
1
如何使用javascript实现一件电脑优化、清理和设置主页的功能,可以远程控制设置主页的内容
7
javascript简单的问题,想要c币的都来回答:怎么在js网页中实现
1
javascript语言怎么实现可以扩展的箭头,箭头下面出现子箭头,然后再一层打开的界面?
3
请问EXT JS能实现下面這种效果吗?
2
请问怎么利用javascript实现电子计算机远程开机和关机的功能?定时开机怎么实现?
1
javascript怎么实现判断用户的计算机是否已经处于开机的状态了呢?如何判断状态?
2
javascript怎么实现调用api的功能,api调用功能的语句的格式是怎么样的?
3
用javascript动态ajax添加数据的判断怎么实现?
0
javascript+unifia.js+ome怎么实现国标3码的过滤?
6
在html前端页面中密码输入框,输入一个字符显示明文,过一秒后再变*号的效果如何用js实现
1
怎样使用Three.js实现多张的图像雾化的效果。
1
javascript 怎么实现远程联机
0
如下图效果在Table中 新增行及列lcombox怎么使用js实现的?
3
如何用js实现html单元格内的值被编辑而改变其背景色?