Я пытаюсь отобразить другое изображение в зависимости от результата таймера и не могу найти выход. Пока у меня есть кнопки «Пуск» и «Стоп», но когда я нажимаю «Стоп», я хочу использовать значение, при котором включен таймер, и отображать изображение (в окне оповещения или на самой веб-странице) в зависимости от этого значения.

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>

Любой совет или обсуждение было бы здорово, спасибо.

1
Cheterfield Mcfisticuffs 22 Янв 2013 в 17:30

2 ответа

Лучший ответ

Примерно так будет работать лучше и компактнее:

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 секунд или всякий раз, когда ,

Надеюсь это поможет.

1
mattdlockyer 22 Янв 2013 в 16:30

Вам нужен тег <img> в вашем HTML, например:

<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
0
AlexStack 22 Янв 2013 в 13:40