根據計時器顯示不同的圖像

我試圖根據計時器的結果顯示不同的圖像，並且找不到方法。到目前爲止，我有一個開始和停止按鈕，但是當我點擊停止按鈕時，我想使用定時器打開的值並根據該值顯示圖像（在警告框或網頁本身上）。根據計時器顯示不同的圖像

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>

任何意見或討論會很好，謝謝。

來源

2013-01-22 Cheterfield Mcfisticuffs

它被支持，但你需要的空間使用：'else if' – mattdlockyer

你試圖在時間基礎上改變圖像？你讓事情變得複雜！ –

和其他人評論被刪除，說：elseif不支持 – mattdlockyer

像這樣的事情會更好地工作，它是更緊湊：

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-22 13:45:19 mattdlockyer

如果您想在動畫中使用更多階段，只需將更多圖像添加到imageSrcs數組中，然後減少setInterval方法調用的時間，以便它反映正確的比薩餅烹飪時間：D – mattdlockyer

您需要一個<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-22 13:40:55 AlexStack

根據計時器顯示不同的圖像

回答

相關問題