<!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(){
?????if(oDiv.offsetLeft<300){
??oDiv.style.left?=?oDiv.offsetLeft+10+"px";
????
????}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="開始"/>
<input??id="back"?type="button"?value="返回"/>
<div?id="div1">
</div>
</body>
</html>
2016-12-14
<!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>2016-12-14
這樣可以解決不能返回的問題 <!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; } #back{ display:none; } </style> <script> window.onload=function(){ ????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"; ????? var?back=document.getElementById('back'); ????? var?star=document.getElementById('star'); ????? star.style.display='none'; ????? back.style.display='block'; ????? ????}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"; ????? var?back=document.getElementById('back'); ????? var?star=document.getElementById('star'); ????? star.style.display='block'; ????? back.style.display='none'; ????}else?{ ??????clearInterval(timer); ????} ????? ?????????? ?????????},30) } } </script> <body> <input??id="star"?type="button"?value="開始"?/> <input?id="back"?type="button"?value="返回"?/> <div?id="div1"> </div> </body> </html>