匀速运动

来源:互联网 发布:java学的不好怎么办 编辑:程序博客网 时间:2024/05/22 07:46
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #box{            width: 100px;            height: 100px;            background-color: pink;            position: absolute;            top: 100px;            left: 0;        }    </style></head><body>    <button id="btn">开始</button>    <div id="box"></div></body></html><script>    var btn = document.getElementById("btn");    var box = document.getElementById("box");    var num = 0; //距离左侧的值left    var timer = null; //定时器    btn.onclick = function () {        timer = setInterval(function(){            num++;            num>=500 ? clearInterval(timer) : box.style.left = num + "px";        },10);    }</script>
0 0
原创粉丝点击