爲什麼我的動畫不能運行？

當我在我的網站上運行代碼時，它以圖像jackhammers1而不是jackhammers0開始，並且不會執行startBouncing（）方法。它只是顯示一個圖像和沒有動畫的形式。這是從教科書複製的例子，所以我不知道它不應該如何工作。爲什麼我的動畫不能運行？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>JackHammer</title> 


<script type="text/javascript"> 

/* <![CDATA[ */ 

var jackhammers = newArray(11); 
var curJackhammer = 0; 
var direction; 
var begin; 
jackhammers[0] = "jackhammer0.gif"; 
jackhammers[1] = "jackhammer1.gif"; 
jackhammers[2] = "jackhammer2.gif"; 
jackhammers[3] = "jackhammer3.gif"; 
jackhammers[4] = "jackhammer4.gif"; 
jackhammers[5] = "jackhammer5.gif"; 
jackhammers[6] = "jackhammer6.gif"; 
jackhammers[7] = "jackhammer7.gif"; 
jackhammers[8] = "jackhammer8.gif"; 
jackhammers[9] = "jackhammer9.gif"; 
jackhammers[10] = "jackhammer10.gif"; 


function bounce(){ 

    if(curJackhammer == 10) 
     curJackhammer = 0; 
    else 
     ++curJackhammer; 
     document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer].src; 

    if(curJackhammer == 0) 
     direction = "up"; 

    else if(curJackhammer == 10) 
     direction = "down"; 
     document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer]; 
} 

function startBouncing(){ 

    if (begin) 
     clearInterval (begin); 
    begin = setInterval("bounce()",90); 
} 


/* ]]> */ 

</script> 

</head> 

<body> 

<h1>Jackhammer Man</h1> 

<p><img src="jackhammer1.gif" height="113" width="100" alt="Image of a man with a jackhammer." /></p> 

<form action="" enctype="text/plain"> 
    <p> 
     <input type="button" value="Start Bouncing" onclick="startBouncing();" /> 
     <input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" /> 
    </p> 
</form> 

</body> 

</html>

來源

2012-12-01 Rocky Celltick Eadie

看起來像有花括號 - {和} - 在你的'else'和'else if'後缺少 – Stuart

它與jackhammer1開始，因爲在HTML源代碼你有<img src="jackhammer1.gif"...代替jackhammer0和也當用戶點擊該按鈕開始反彈，因爲在JavaScript你增加curJackhammer它將與jackhammer1啓動0至1 之前您交換圖像。

我認爲下面的代碼會做你想做的事情......（不知道你想用direction = "up"/"down"做什麼）。

請注意，在javascript中使用if和else之後通常需要大括號，但如果只有一個命令，則它們是可選的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>JackHammer</title> 
<script type="text/javascript"> 
var curJackhammer = 0; 
var begin; 

function bounce() { 
    document.getElementsByTagName('img')[0].src = 
     'jackhammer' + curJackhammer + '.gif'; 
    curJackhammer ++; 
    if (curJackhammer > 10) { 
     curJackhammer = 0; 
    } 
} 

function startBouncing(){ 
    if (begin) { 
     clearInterval (begin); 
    } 
    begin = setInterval(bounce,90); 
} 
</script> 
</head> 

<body> 

<h1>Jackhammer Man</h1> 

<p><img src="jackhammer1.gif" height="113" width="100" 
alt="Image of a man with a jackhammer." /></p> 

<form action="" enctype="text/plain"> 
    <p> 
     <input type="button" value="Start Bouncing" onclick="startBouncing();" /> 
     <input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" /> 
    </p> 
</form> 

</body> 

</html>

來源

2012-12-01 20:24:12 Stuart

爲什麼我的動畫不能運行？

回答

相關問題