1

タイマーの結果に応じて別の画像を表示しようとしていますが、方法が見つかりません。これまでのところ、開始ボタンと停止ボタンがありますが、停止をクリックすると、タイマーがオンになっている値を使用し、その値に応じて (アラート ボックスまたは Web ページ自体に) 画像を表示したいと考えています。

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

<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
于 2013-01-22T13:40:55.717 に答える