是否有一个简单的方法来添加多个javascript图像一起通过' imgCounter.src = "

Is there an easy way to add multiple javascript images together via `imgCounter.src =`

本文关键字：imgCounter src 一起 图像 方法 简单 有一个 添加 javascript 是否      更新时间：2023-09-26

在photoshop中我创建了images 0.png到9.png，并且知道我可以通过改变每个数字的每个图片来模拟计数器。

想法一:

我想到的一种方法是有多行

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中的数字。这并不难，但灵活性，我可以有1个图像ID和字符串3。png在javascript一起吗?像这样…

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张图片吗?哈哈很容易吗?我知道从技术上讲，任何事情都可以通过困难的方式完成。

如果这是一个很大的痛苦在屁股我ok的想法1，但它是较少的"自由"，因为我必须编码HTML与多个ID标签，这是乏味的…

只是好奇你们的想法，如果你们有解决办法。:)非常感谢。

。

是否可以将img src=""作为NULL或空字符串，如果我稍后将通过javascript粘贴图像?

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

在源代码中需要计数器的地方，只需添加一个带有适当id的空div。

当下面的counterSet()函数用容器div的id和一个值调用时，它在div中创建新的子<img>元素，并适当地设置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>

我会使用三个独立的id。

你可以这样设置src属性:

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