<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> #div1{width:200px; height:200px; background:red; position:absolute; left:0; top:200px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById("star"); var oDiv=document.getElementById("back"); star.onclick= function(){ starmove(300); } back.onclick= function(){ starback(0); } var timer=null function starmove(iTarget){ clearInterval(timer); var oDiv=document.getElementById("div1"); timer=setInterval(function(){ var star=document.getElementById('star'); if(oDiv.offsetLeft<300){ oDiv.style.left = oDiv.offsetLeft+10+"px"; star.id="back"; var back=document.getElementById('back'); back.value='返回'; }else { clearInterval(timer); } },30) } function starback(iTarget){ clearInterval(timer); var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft>0){ oDiv.style.left = oDiv.offsetLeft-10+"px"; }else { clearInterval(timer); } },30) } } </script> <body> <input id="star" type="button" value="开始"/> <div id="div1"> </div> </body> </html>
o_n
相关分类