2016-06-08 3 views
-5

Здравствуйте еще раз, ребята я недавно нашел этот код на другом форуме, что я сделал единственную проблему, которую я имею пытается объяснить, что код на самом деле означаетНе могли бы вы помочь мне Объясните, что это значит?

var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"]; 
    var index = 0; 

    function changeLights() { 
    var image = document.getElementById('Red.jpg'); 
    var display = document.getElementById('display'); 
    index = (index + 1) % 4; 
    image.src = list[index]; 
    display.innerHTML = list[index] 

Спасибо за вашу помощь, ребята я надеюсь, что я могу услышать ваши ответы в ближайшее время

<!DOCTYPE html> 
<html> 
<body> 
<h1>Traffic Light Sequence</h1> 

<img id="Red.jpg" src="Red.jpg"> 

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

<script> 
    var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"]; 
    var index = 0; 

    function changeLights() { 
    var image = document.getElementById('Red.jpg'); 
    var display = document.getElementById('display'); 
    index = (index + 1) % 4; 
    image.src = list[index]; 
    display.innerHTML = list[index]; 

    } 
</script> 

</body> 
</html> 

Вот весь мой код

+0

по пути это светлая последовательность движения –

+0

где остальная часть функции ..? – Redu

+0

То есть @Redu –

ответ

0
var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"]; 

это обр ay названий источников изображений.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

var index = 0; 

это переменная, это называется индекс, и имеет значение потому что вы можете целевой элемент массива (например, Amber.jpg), используя его индекс , Индекс массива по умолчанию начинается с (на основе нуля), поэтому в массиве «list» выше индекс 0 (список [0]) вернет «Red.jpg».

function changeLights() { 

    var image = document.getElementById('Red.jpg'); 
    var display = document.getElementById('display'); 
    index = (index + 1) % 4; 
    image.src = list[index]; 
    display.innerHTML = list[index]; 

    } 

Эта функция выбирает <img> тег с идентификатором «red.jpg», а затем устанавливает это SRC = быть index + 1 (= 1), а затем устанавливает внутренний HTML элемента с идентификатором дисплея будет Amber.jpg (список [1]).

Правильный способ «изменить огни» вместо этого будет:

var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"]; 

var index = 0; 

function changeLights() { 

    var max = list.length - 1; 
    var next = index += 1; 

    if(next > max) { 
     next = 0; //start back at beginning 
     index = 0; 
    } 

    var image = document.getElementById('IDOFIMAGETAG'); //replace will correct ID of <img> 

    image.src = list[next]; 

} 
+0

Спасибо за ваш ответ и изменение кода, но код, который я использовал дозу, работает и работает достаточно хорошо для того, что я делаю, однако я попробую ваш код и спасибо за ввод по моей проблеме –

+0

, а также в html выше, я определил

+0

, если вы решите стиль # Red.jpg в CSS, вам нужно будет избежать периода: #Red \ .jpg. Я не знал, что это действительный персонаж в ID! Круто – JohnnyFaldo

Смежные вопросы