javascript - 根据定时器显示不同的图像

Question

我试图根据计时器的结果显示不同的图像，但找不到解决办法。到目前为止，我有一个开始和停止按钮，但是当我单击停止时，我想使用计时器打开的值并根据该值显示图像(在警报框或网页本身上)。

if( timer =>60){
     img.src("pizzaburnt.jpg");
}elseif (timer <=30){
   img.src("pizzaraw.jpg");
}
else{
img.src("pizzaperfect.jpg
}





///Time
        var check = null;

        function printDuration() {
            if (check == null) {
                var cnt = 0;

                check = setInterval(function () {
                    cnt += 1;
                    document.getElementById("para").innerHTML = cnt;
                }, 1000);
            }
        }

    //Time stop
        function stop() {
                        clearInterval(check);
                        check = null;
                        document.getElementById("para").innerHTML = '0';

                }

**HTML**
 <td>
  Timer :<p id="para">0</p>
 </td>

任何建议或讨论都会很棒，谢谢。

Answer 1

像这样的东西会工作得更好并且更紧凑:

var img = document.getElementById("image");
var imageSrcs = ['pizzaRaw.jpg', 'pizzaPerfect.jpg', 'pizzaBurnt.jpg'];
var imageIndex = 0;
var interval = setInterval(animate, 30000); //change image every 30s
var animate = function() {
    //change image here
    //using jQuery:
    img.src(imageSrcs[imageIndex]);

    imageIndex++; //move index for next image

    if (imageIndex == imageSrcs.length) {
        clearInterval(interval); //stop the animation, the pizza is burnt
    }
}
animate();

您不想使用增量变量和 1 秒计时器的原因是，您只是混淆了逻辑，旋转计时器，并且当您真正想要的只是图像每 30 更改一次时会造成一些困惑秒或每当。

希望这有帮助。