                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

如何把兩個按鈕合并成一個，按一下出去，再按一下返回

<!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

源自：JS動畫效果 2-1

關注問題我要回答

2086

操作

收起

2 回答

慕數據5775487 回答被采納 +3 積分
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>

0 回復有任何疑惑可以回復我~

收起回答

狂四郎提問者

非常感謝！

2016-12-15 回復有任何疑惑可以回復我~

慕數據5775487
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>

0 回復有任何疑惑可以回復我~

收起回答