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个图像就要改变一次秒或任何时候。

希望这有帮助。

Answer 2

您的HTML中需要<img>标记，如下所示：

<html>
<body>
Timer: <p id="para">0</p>
Image: <img id="image" />
</body>
</html>

Javascript代码就像：

var handle;
var timerValue = 0;
var img = document.getElementById( "image" );
var para = document.getElementById("para");

function onTimer() {
  timerValue++;
  para.innerHTML = timerValue;
  if ( timerValue >= 60 ) {
    img.src( "pizzaburnt.jpg" );
  }else if ( timer <= 30 ) {
    img.src( "pizzaraw.jpg" );
  } else {
    img.src("pizzaperfect.jpg" );
  }
}

function start () {
  if ( handle ) {
    stop();
  }
  timerValue = 0;
  setInterval( onTimer, 1000 );
}

function stop () {
  if ( handle ) {
    clearInterval ( handle );
  }
}

请确保这3个文件与HTML文件位于同一目录中：

pizzaburnt.jpg
pizzaraw.jpg
pizzaperfect.jpg

根据计时器显示不同的图像

2 个答案: