有沒有一種簡單的方法來通過`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 =`

回答

相關問題