Есть ли простой способ добавить несколько изображений javascript вместе через `imgCounter.src =` - PullRequest
Новая
       3

Есть ли простой способ добавить несколько изображений javascript вместе через `imgCounter.src =`

0 голосов
/ 03 декабря 2011

В фотошопе я создал изображения от 0.png до 9.png и знаю, что могу изменить каждую цифру для имитации счетчика, меняя каждую картинку каждой цифры по мере ее обратного отсчета.

ИДЕЯ 1:

Один способ, которым я думал, состоит в том, чтобы иметь несколько строк

HTML: 

<div align="right"><img src="graphics/odometers/1.png" /id="digit1">
                   <img src="graphics/odometers/2.png" /id="digit2">
                   <img src="graphics/odometers/3.png" /id="digit3"></div>

JAVASCRIPT: 

var imgCounter = document.getElementById('digit1');
imgCounter.src = "graphics/odometers/white and blue with black background/1.png"; // shows the digit 1
var imgCounter = document.getElementById('digit2');
imgCounter.src = "graphics/odometers/white and blue with black background/2.png"; // shows the digit 2
// etc for as many digits as I want to show

и меняйте цифры в javascript по каждому идентификатору. Это не сложно, но для гибкости можно иметь 1 идентификатор изображения и строку 3 .png вместе в javascript? Вот так ...

ИДЕЯ 2 : Не уверен, возможно ли это.

HTML: 

<div align="right"><img src="" /id="formtimer"></div>

JAVASCRIPT: 

// somehow show 3 graphics in a row 123 without having 3 ID tags, only 1 ID tag
var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/white and blue with black background/1.png";

Я знаю, что в приведенном выше примере показана только цифра 1, а не все 3 цифры ... (потому что я не знаю, возможно ли это).

Есть ли способ показать 3 картинки вместе? лол. Без труда? Я знаю, что технически все можно сделать трудным путем ...

Если это большая боль в заднице, я в порядке с IDEA 1, но это меньше "свободы", потому что я должен кодировать HTML с несколькими тегами ID, что является утомительным ...

Просто любопытно, что вы все думаете и есть ли у вас решение. :) Очень ценится.

ТАКЖЕ:

Можно ли оставить img src="" как NULL или пустую строку, если позже я буду вставлять изображение через javascript?

Ответы [ 2 ]

1 голос
/ 03 декабря 2011

Вам вообще не нужно включать элементы <img> в исходный html, вы можете добавлять их с помощью JavaScript и даже не присваивать им идентификаторы.

В точке вашего источника, где вы хотите, чтобы счетчик просто поместил пустой div с соответствующим идентификатором.

Когда нижеприведенная функция counterSet() вызывается с идентификатором контейнера div и значением, оно создает новые дочерние элементы <img> в div с соответствующим образом установленным src, но повторно использует любые существующие дочерние элементы <img>, которые есть от любого предыдущего значения, которое было установлено. Если новое значение имеет меньше цифр, чем последнее, то функция удаляет оставшиеся элементы <img>: 

<div id="counter1"></div>

<script>
function counterSet(counterId, val) {
   var c = document.getElementById(counterId),
       i,
       d;
   for (i = 0; i < val.length; i++) {
       // if the container already had enough child img elements
       // for current digit set current img's src, otherwise add
       // new img to end
       if (i < c.childNodes.length)
          c.childNodes[i].src = "graphics/odometers/" + val.charAt(i) + ".png";
       else {
          d = document.createElement("img");
          d.src = "graphics/odometers/" + val.charAt(i) + ".png";
          c.appendChild(d);
       }
   }
   // if the container already had too many child img elements
   // (from a previous value) remove the leftover digits
   while (c.childNodes.length > val.length)
       c.removeChild(c.childNodes[val.length]);   
}

counterSet("counter1","218");

</script>
0 голосов
/ 03 декабря 2011

Я бы просто использовал три отдельных идентификатора.

Вы можете использовать что-то вроде этого для установки атрибутов src: 

for (i = 1; i <= NUMBER_OF_IMAGES; i++) {
  var img = document.getElementById('img_' + i);
  imgr.src = 'images/image_' + i + '.png";
)
...