区块变速运动模拟案例

　　区块变速运动模拟案例

　　红色区块点击按钮实现区块运动速度逐渐减小到left值为300px停止。

　　(1)div的style属性#div1{width:200px;height:100px;background:red;position:absolute;left:0;}实现该功能。

　　(2)div的style属性#div1{width:200px;height:100px;background:red;position:absolute;left:700px;}实现该功能。

　　div2的style属性：

　　#div2{width:1px;height:300px;background:black;position:absolute;left:300px;}

<input id='btn1' type='button' value='开始运动'/>
<div id='div1'></div>
<div id="div2"></div>

　　(1)根据题意完成的代码：

window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var oBtn=document.getElementById('btn1');
    oBtn.onclick=function()
    {
        setInterval(function(){
        /*速度为抵达目标点剩余路程的1/10,由于剩余路程是逐渐减少的，因此理论上speed的值也是在逐渐减小，从而实现变速运动*/
        var speed=(300-oDiv.offsetLeft)/10;
        /*JavaScript对于left值为整数，出现小数时默认小数部分舍去。而speed=(300-oDiv.offsetLeft)/10的值小于1时，会导致oDiv.offsetLeft+speed实际取值等于oDiv.offsetLeft，即没有抵达left值300px而停止下来，因此需要做向上取整。*/
        speed=Math.ceil(speed);
        oDiv.style.left=oDiv.offsetLeft+speed+'px';    
        
        },30);
    }
}

　　(2)根据题意完成的代码：

window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var oBtn=document.getElementById('btn1');
    
    oBtn.onclick=function()
    {
        setInterval(function(){
        var speed=(300-oDiv.offsetLeft)/10;
/*目标值小于当前值，speed为负值，需要向下取整保证保证speed的值最后出现大于-1的小数时，oDiv的left值还能运动到目标点。*/
        speed=Math.floor(speed);
        oDiv.style.left=oDiv.offsetLeft+speed+'px';    
        
        },30);
    }
}

　　结合(1)(2)的函数可以对speed进行条件判断实现框架整合。

　　speed=speed>0?Math.ceil(speed):Math.floor(speed);

window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var oBtn=document.getElementById('btn1');
    oBtn.onclick=function()
    {
        setInterval(function(){
        var speed=(300-oDiv.offsetLeft)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        oDiv.style.left=oDiv.offsetLeft+speed+'px';        
        },30);
    }
}

　　speed变速运动的数学模型构建：

　　AB两地直线距离相距为S，机器人β从A点向B点行进。已知机器人β的每间隔固定时间行进一段路程，其下次行进的距离为当前距离B点路程的1/q(q为正整数),求机器人第n次行进距离的表达式以及前n项和公式S_n。

　　问题：应用数学式来精确计算区块会在什么位置停止。为什么oDiv.style.left=oDiv.offsetLeft+speed+'px';就无法大于300px?

　　因为speed=(300-oDiv.offsetLeft)/10，即每次前进的距离为剩余距离的1/10，所以在数学模型中oDiv.style.left=oDiv.offsetLeft+speed+'px'的值只会无限逼近300px，不会出现大于300px的情况。

　　问题：JS的运算顺序问题，是先计算还是先合并?譬如oDiv.offsetLeft*9/10+oDiv.offsetLeft/10

　　因为JS存在默认舍弃小数点取整的问题，那么这个式子是否还等同于：oDiv.offsetLeft?

     如果oDiv.offsetLeft*9/10和oDiv.offsetLeft/10计算的值存在小数，那么是进行舍弃小数取整后进行运算，还是直接小数相加后再判断取整?

为什么JavaScript设置元素的width值需要设置oDiv.style.left=oDiv.offsetLeft+speed+'px'; 的形式，而不能直接设置为oDiv.style.width=9.5px;？

该问题等实质：在JavaScript中在函数赋值与括号内输入值的时候，什么时候带引号，什么时候不带引号，有什么区别?
在JavaScript中函数赋值和括号内输入值带有引号说明赋值或输入值是字符串，不带引号说明赋值是变量或者数字。
直接设置为oDiv.style.left=oDiv.offsetLeft+speed+px;，控制台会报错“ReferenceError: px is not defined”。因为px没有带引号表示是变量，代码中并未定义一个px的变量。oDiv.offsetLeft为数字，speed的值为数字，数字与'px'这个字符串相加，会隐形类型转换为字符串相加，从而得到oDiv.style.left赋值为类似‘16px’这种形式的字符串。