Question

我正在尝试创建一个图像动画，该动画首先单击Start Animation按钮，然后每半秒与另一张图片交替显示，直到我单击Stop Animation按钮。当我运行此代码时，它不会输出任何内容。以下代码有什么问题？

我的编码：

<button onClick="StartAnimation()">
Start Animation
</button>

<button onClick="StopAnimation()">
Stop Animation
</button>

<script>
    var counter;
    var Schedule;
    function StartAnimation(){
    var images = document.getElementById("fish"); 
   images.src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";


    Schedule = setInterval(animationfunction,5000);

} 
function animationfunction(){
    var fish_img = document.getElementById("fish");
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
}
function StopAnimation(){
    clearInterval(Schedule);
}

Answer 1

您将函数function StarAnimation(){的名称错误命名为function StartAnimation(){

Answer 2

尝试添加此功能。您的代码看起来像，您只想更改一次图像。尝试添加循环，或者您可以像这样在一个if-else语句中完成。

function animationfunction(){

if(image == "happy"){
    image = "sad";
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
}else{
    image="happy";
        fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";
}
}
function StopAnimation(){
    clearInterval(Schedule);
}

如何使用javascript

2 个答案: