HTML [JAVASCRIPT]中的圖像在幾秒鐘後更改

-1

此代碼我在某種程度上有效;它會改變，但速度很快，我希望在3秒左右後改變，但我無法找到如何改變。提前致謝！HTML [JAVASCRIPT]中的圖像在幾秒鐘後更改

CODE：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left> 

<script> 
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 

setInterval(change_light,1); 
function change_light() { 
    place += 1; 
    if (place > sequence.length -1) { 
    place = 0; 
    } 
    document.getElementById('theImage').src = sequence[place]; 
}

來源

2017-02-25 AntsOfTheSky

如果您決定出現問題，請標記正確答案 – Antonio

你應該setInterval的時期使用毫秒。試試這個請。我也簡化了你的條件：

var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 
var frameInterval = 1000; // milliseconds 

setInterval(change_light, frameInterval); 
function change_light() { 
    place++; 
    place = place % sequence.length; 
    document.getElementById('theImage').src = sequence[place]; 
}

來源

2017-02-25 19:05:52 Antonio

非常感謝！總是希望提高:) – AntsOfTheSky

我可以問一下「place = place％sequence.length」的函數可以定義爲什麼？我假設它會和以前一樣，只是沒有if？出於某種原因，這使我有點困惑......你能否定義它的用途？我希望能夠徹底明白:) – AntsOfTheSky

當然！它是一個餘數運算符，當一個操作數除以第二個操作數時，該運算符返回餘下的餘數。更多關於它你可以在這裏找到：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder – Antonio

的setInterval希望你通過毫秒（未秒）

使用像這樣的數字：setInterval(change_light,3000);

來源

2017-02-25 19:05:11 mehulmpt

謝謝！ ----- – AntsOfTheSky

這很簡單，你什麼都做對了！只是一個微小的變化：函數setInterval（change_light，3000）;應該接收它的時間以毫秒爲單位，而不是以秒爲單位。

，也是我想建議增加一些返回值給setInterval，那麼你就可以，如果想用清除此計時器：

clearInterval(change_light_id);

，這裏是你的固定碼：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left> 

<script> 
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 

change_light_id = setInterval(change_light,3000); 

function change_light() { 
    console.log(1); 
    place += 1; 
    if (place > sequence.length -1) { 
    place = 0; 
    } 
    document.getElementById('theImage').src = sequence[place]; 
} 
</script>

來源

2017-02-25 19:10:35

非常感謝你！ – AntsOfTheSky

HTML [JAVASCRIPT]中的圖像在幾秒鐘後更改

回答

相關問題