JavaScript：我怎樣才能讓我的交通燈從一個按鈕順序自動化？

我創建了一個腳本來點擊一個按鈕來改變交通信號燈。不過，我想改變它，所以它是自動的。我對編碼非常陌生，所以如果有人能夠幫助我或爲我創建它，我將不勝感激。我將在下面留下我的當前腳本。如果有人能夠幫助，我會再次感謝它。JavaScript：我怎樣才能讓我的交通燈從一個按鈕順序自動化？

<!DOCTYPE html> 
<html> 
<body> 

<h1>JavaScript Task 3 Traffic Lights </h1> 

<img id=」light」 src=」"H:/Year 11/Computer Science/A452 Practical Investigation/Task 3 - Code/assets/redlight.jpg"> 

<button type=」button」 onclick=」changeLights()」>Change Lights</button> 

<script> 
var list = [ 
"H:/Year 11/Computer Science/A452 Practical Investigation/Task 3 - Code/assets/redlight.jpg", 
"H:/Year 11/Computer Science/A452 Practical Investigation/Task 3 - Code/assets/redamberlight.jpg", 
"H:/Year 11/Computer Science/A452 Practical Investigation/Task 3 - Code/assets/greenlight.jpg", 
"H:/Year 11/Computer Science/A452 Practical Investigation/Task 3 - Code/assets/amberlight.jpg" 
]; 

var index = 0; 
function changeLights() { 
    index = index + 1; 

    if (index == list.length) index = 0; 
    var image = document.getElementById(‘light’); 

    image.src=list[index]; 
} 
</script> 

</body> 
</html>

來源

2016-12-05 MemeLord

除了由czosel給出的（好）的答案，這是值得指出的是絕對地址是很少與託管文件，並運行打交道時是好事本地（即，在您自己的機器上）。相對URL更容易維護 - 它們也更短。據推測，你有一個HTML文件存在於'H：\ Year 11 \ Computer Science \ A542 Practical Investigation \ Task 3 - Code'中。在該文件夾和html文件中，還有一個名爲'assets'的文件夾。如果是這樣的話，你可以簡單地引用圖像：'assets/redlight.jpg'，'assets/greenLight.jpg'等等（cont） – enhzflep

通過這樣做，你可以複製文件夾的全部內容 - 將html文件和資產文件夾及其圖像連同其圖像一起修改到不同的位置 - 您可以從USB棒或桌面或任何地方運行它。你甚至可以直接將它放到在線服務器上 - 不需要進一步修改。這是一個MSDN頁面，更詳細地解釋了這個想法：[瞭解絕對和相對URL地址]（https://msdn.microsoft.com/en-us/library/bb208688（v = office.12）.aspx） – enhzflep

我假設「自動化」是指在一定的時間間隔內自動切換交通信號燈。這很容易與setInterval的幫助來完成：

setInterval(changLights, 1000);

第一個參數是要定期執行的功能，，第二個是以毫秒爲單位的時間間隔 - 所以在這個例子中，燈光會改變每一秒。

小例子：

index = 0; 
 

 
function change() { 
 
    index += 1; 
 
    console.log(index); 
 
} 
 

 
setInterval(change, 1000);

來源

2016-12-05 11:22:07

JavaScript：我怎樣才能讓我的交通燈從一個按鈕順序自動化？

回答

相關問題