需求是点击button，div就一直往右移动，给个条件left=800px就停止移动，通过定时器来控制。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background: red; /*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/ position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload = function(){ //获取元素的值 function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name] } else{ return obj.currentStyle[name] } } //需求是点击button，div就一直往左移动 btn = document.getElementById("btn"); box1 = document.getElementById("box1"); var timer; btn.onclick = function(){ //清除上一个定时器 clearInterval(timer); //开启一个定时器，用来执行动画效果 setInterval(function(){ //获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number var oldlvalue = parseInt(getStyle(box1,"left")); newvalue = oldlvalue + 10; if(newvalue>800){ newvalue = 800; } box1.style.left = newvalue + "px"; /* * 控制移动的位置，当800px时，就停止移动 */ if(newvalue === 800){ clearInterval(timer); } },3000) } } </script> </head> <body> <button id="btn">点击div向右移动</button> <br /><br /> <div id="box1"></div> </body> </html>
希望可以坚持学习新的，这也是作为一个复习，到时候要回顾一看便知，多谢支持！