<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运动框架-匀速运动</title> <style type="text/css"> .div { width: 100px; height: 100px; background-color: chartreuse; margin-top: 20px; position: relative; left: 0; top: 0; } </style> <script type="text/javascript"> var timer = null; function start() { var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div'); //1 clearInterval(timer); timer = setInterval(function() { var speed = 1; //2 if(oDiv.offsetLeft >= 1100) { clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30) } </script> </head> <body> <input type="button" id="btn" value="运动" onclick="start()" /> <div class="div" id="div"></div> <p>关键点:1:清除定时器，2：if/else判断</p> </body> </html>
学习路径：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc