有没有一种简单的方法可以通过“imgCounter.src =”将多个javascript图像添加在一起

Question

在 Photoshop 中，我创建了 0.png 到 9.png 的图像，并且知道我可以通过在倒计时时更改每个数字的每张图片来更改每个数字来模拟计数器。

IDEA 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

并按每个ID更改javascript中的数字。这并不难，但是为了灵活性，我可以在 javascript 中将 1 个图像 ID 和字符串 3 .png 放在一起吗？像这样...

IDEA 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，但它不太“自由”，因为我必须使用多个 ID 标签对 HTML 进行编码，这很乏味。 只是好奇大家

的想法以及是否有解决方案。 :) 非常感谢。

ALSO：

如果我稍后要通过 JavaScript 粘贴图像，可以将 img src="" 保留为 NULL 或空字符串吗？

Answer 1

您根本不需要在源 html 中包含 元素，您可以使用 JavaScript 添加它们，甚至不需要给它们 id。

在源代码中您想要计数器的位置，只需放置一个具有适当 id 的空 div 即可。

当使用容器 div 的 id 和值调用下面的 counterSet() 函数时，它会在 div 中创建新的子 元素，并适当设置 src，但会重用之前设置的任何值中存在的任何现有子 元素。如果新值的位数少于最后一个值，则该函数将删除剩余的 元素：

<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>

Answer 2

我只会使用三个单独的 id。

您可以使用类似的方法来设置 src 属性：

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