有没有一种简单的方法来通过`imgCounter.src =`

将多个javascript图像添加到一起在Photoshop中，我创建了图像0.png通过9.png，并知道我可以通过更改每个图片来更改每个数字来模拟计数器数字倒数。有没有一种简单的方法来通过`imgCounter.src =`

IDEA 1：

<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

我认为将有

HTML多行

的一种方式

并通过每个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是tedius ...

只是好奇你的想法，如果你有一个解决方案。：）非常感激。

ALSO：

是否确定要离开img src=""为空或空字符串，如果我以后可以在通过JavaScript坚持的图像？

来源

2011-12-03 PerryCS

你并不需要包括在HTML源的<img>元素可言，你可以用JavaScript添加他们甚至没有给他们的ID。

在您的来源的位置，你想要柜台只是把一个空的div与适当的ID。

当counterSet()功能下面被称为与容器div的ID，它创造与SRC设置适当的DIV新的子<img>元素的值，但重复使用任何现有的子<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>

来源

2011-12-03 11:06:48 nnnnnn

酷 - 我会检查出位（刚回到家） - 它看起来像什么，我一直在寻找！如果它工作巨大的感谢！一旦我尝试了，我会回来并给你信用。看......那就是我缺乏的 - 我不知道什么是可能的，因为我完全不了解DOM，什么是允许的，什么是不允许的。没有这些知识，我仍然是一个新手程序员。我明白节点是如何工作的，但不是在抓取DOM（一个带有“树”图片的网站会很棒），但我知道一点点Visual C/C++，并且已经与链表一起工作。我迫不及待地消化和研究你的榜样！ – PerryCS

哦！你可以创建元素...惊人的...很酷... – PerryCS

你的例子完美的作品！此外，感谢您对DOM如何工作的深入了解。非常感激！很好的例子。我喜欢学习！谢谢！ – PerryCS

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

您可以使用这样的事情来设置src属性：

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

来源

2011-12-03 08:34:51 RCE

有没有一种简单的方法来通过`imgCounter.src =`

回答

相关问题