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进行编码，这是标签...

只是好奇你们所想的，以及你们是否有解决方案。 :)非常感谢。

同时

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

Answer 1

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

在您的源代码中，您希望计数器只放置一个具有适当ID的空div。

当使用容器div的id调用下面的counterSet()函数时，它会在div中创建新的子<img>元素并正确设置src，但重用任何现有的子{{1来自任何先前设置的值的元素。如果新值的位数少于最后一位，则该函数将删除剩余的<img>元素：

<img>

Answer 2

我只想使用三个独立的ID。

你可以使用这样的东西来设置src属性：

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

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

2 个答案: