为什么我的动画不运行？

Question

When I run the code on my site it starts off with image jackhammers1 instead of jackhammers0 and won't execute the startBouncing() method. 当我在我的网站上运行代码时，它从图像jackhammers1而不是jackhammers0开始，并且不会执行startBouncing（）方法。 it just displays the form with one image and no animation. 它只显示带有一个图像且没有动画的表单。 It is an example copied from the textbook so I don't see how it shouldn't work. 这是从教科书中复制的一个示例，因此我看不出它应该如何工作。

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

Answer 1

It starts with jackhammer1 because in the html source you have <img src="jackhammer1.gif"... instead of jackhammer0, and also when the user clicks the button to start bouncing, it will start with jackhammer1 because in the javascript you increment curJackhammer from 0 to 1 before you swap the images. 它与jackhammer1开始，因为在HTML源代码你有<img src="jackhammer1.gif"...而不是jackhammer0，而且当用户点击按钮，开始反弹，它会与jackhammer1因为在你的JavaScript开始增加交换图像之前， curJackhammer从0到1。

I think the following code will do what you want... (not sure what you were trying to do with the direction = "up" / "down" , though). 我认为下面的代码将完成您想要的...（但不确定您要使用的direction = "up" / "down" ）。

And note that curly brackets are usually needed after if and else in javascript, though they are optional if only a single command follows. 并请注意，在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>

为什么我的动画不运行？

问题描述

1 个解决方案

解决方案1
0 2012-12-01 20:24:12

为什么我的动画不运行？

问题描述

1 个解决方案

解决方案1 0 2012-12-01 20:24:12

解决方案1
0 2012-12-01 20:24:12