极客观点
项目管理
HarmonyOS
为什么不足取整后还会出现这种现象？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:100px;height:100px;background:red;position:absolute;}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById('div1');
var oBtn= document.getElementById('btn');
oBtn.onclick = move;
};
var i=0;
function move()
{ i++;
if(i%2==1){
var timer = null
timer = setInterval(function()
{
var oDiv = document.getElementById('div1');
var speed = (80-oDiv.offsetLeft)/8;
speed = speed > 0?Math.ceil(speed) : Math.floor(speed);
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
},30)}
else{
timerr=setInterval(function()
{
var oDiv = document.getElementById('div1');
var speed = (0-oDiv.offsetLeft)/8;
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>
<input type="button" value="move" id="btn"/>
<div id="div1"></div>
</body>
</html>
你是通过 i 来控制左右移动的。另外可能你对setInterval的理解有点偏差，如果你没有清除这个定时器，他将会一直执行，也就是说，你首次点击后第一个定时器会启动，而且一直执行下去，再点击一次，第二个也会启动，一个是对left进行加，一个进行减，所以导致抖动。修改后的代码如下：