JS简单的运行框架、设表先关、拉终停表

1、运动框架（简单模型）

运动：把连续相关的画面，连续播放（动画）

运动框架需要用到定位，不能用margin，因为margin没有脱离文档流

/*  
    1、一次改变多少 步长
    2、间隔多少时间改变一次
    3、定时器
*/
var oBox = document.querySelector('#box');
var bchag = 10;//步长
var left = 0;
​
var timer = setInterval(function () {
    left += bchag;
    oBox.style.left = left+'px';
},20);

2、设表先关

/*
    设表先关：
    如果连续的点击就会不断，就会设置新的定时器，left不断叠加，造成运动越来越快，
    所以在设置定时器之前都要先清除定时器
*/
var oBox = document.querySelector('#box');
var aBut = document.querySelectorAll('button');
var bchag = 10;//步长
var left = 0;
var timer = null;
​
aBut[0].onclick = function () {
    clearInterval(timer);  //设表先关
    timer = setInterval(function () {
        left += bchag;
        oBox.style.left = left+'px';
    },20);
}
aBut[1].onclick = function () {
    clearInterval(timer);
}

3、拉终停表（能够精确的指定停的位置而不会超越指定的位置）

/*
    拉终停表：拉回终点，再清除定时器，使定位能够更加的精确
    在变化量改变之后进行强制赋值
*/
var oBox = document.querySelector('#box');
var bchag = 11;//步长
var left = 0;
​
var timer = setInterval(function () {
    left += bchag;
    if(left>800){ //拉终停表
        left = 800;
    }
    oBox.style.left = left+'px';
},20);

 

如果不拉终停表的话，就会这样：

 

如果加上拉终停表的写法的话，left就更加的准确