JavaScript 运行缓冲,从快到慢

来源：互联网发布：qq五笔for mac版编辑：程序博客网时间：2024/05/01 01:50

<!doctype html><html><head><meta charset="utf-8"><title>JavaScript 运行缓冲,从快到慢</title><style>#div1 { width:150px; height:150px; background-color:#2B82B3; position:absolute;}</style><script>window.onload = function(){    var oInp = document.getElementsByTagName('input')[0];    var oDiv = document.getElementById('div1');    var Timer = null;    var DivLeft = 0;    oInp.onclick = function(){        //alert(oDiv.offsetLeft);        clearInterval(Timer);        Timer = setInterval(function(){            var iSpeed = Math.ceil((1000-oDiv.offsetLeft)/20); //缓冲实现原理主要是这里,它的值越除越小.            if(oDiv.offsetLeft == 1000){                clearInterval(Timer);                }else{                    DivLeft += iSpeed;                    oDiv.style.left = DivLeft + 'px';                    }            },30);        }    }</script></head><body><input type="button" value="运行" /><br /><br /><div id="div1"></div></body></html>

0 0