1

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

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>

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

4

2 回答 2

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 秒或任何时候更改图像时会造成一些混乱.

希望这可以帮助。

于 2013-01-22T13:45:19.220 回答
0

您的 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
  • 比萨饼.jpg
  • 比萨完美.jpg
于 2013-01-22T13:40:55.717 回答