<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:30px; height:20px; background:red; position:absolute; top:150px; left:50px;} #div2 {width:2px; height: 500px; background-color: blue;position: absolute;left: 100px;} #div3 {width:2px; height: 500px; background-color: blue;position: absolute;left: 300px;} </style> <script> var timer=null; function startDown() { var oDiv=document.getElementById('div1'); var speed = 1; clearInterval(timer); timer=setInterval(function (){ if(oDiv.offsetTop>=300) { clearInterval(timer); } else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); } function startUp() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=-1; if(oDiv.offsetTop<=50) { clearInterval(timer); } else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); } function startLeft() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=5; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } function startRight() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=-5; if(oDiv.offsetLeft<=100) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="开始往下" οnclick="startDown()" /> <input id="btn2" type="button" value="开始往上" οnclick="startUp()" /> <input id="btn3" type="button" value="开始往右" οnclick="startLeft()" /> <input id="btn4" type="button" value="开始往左" οnclick="startRight()" /> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </body> </html>