放置由javascript生成的同一圖像的多個實例

我正在製作一個測試頁面，用戶輸入他們已經消耗了多少糖，然後生成一個圖形計量器，向他們顯示這個值如何對應於每日推薦的糖攝入量。放置由javascript生成的同一圖像的多個實例

儀表本身是一個圖形，我分爲三個部分：開始帽，中間和結束帽。看到下面的鏈接：http://i.imgur.com/CfFI7.jpg

我的問題是，我目前正在運行的代碼不希望追加含有div的中間部分的多個實例的一部分。在這種情況下，我只需更改該圖形部分的寬度就足夠了，但我寧願能夠將圖形複製x次，直到它填充適當數量的欄。圖形的每個部分（開始，中間和結束）都是10px寬。

注意：我試圖編寫代碼，以便根據我在css中給出的大小（而不是使用固定寬度的酒吧/米）來動態填充流量計。

這裏是我的javascript：

function showbar() { 
    //GRAPHICS OF BAR 
    sugarbar = document.getElementById('bar1'); 
    bar_width = parseInt($('#bar1').css("width")) 
    $('#bar1').css({ 
     "height": "10px", "width": "300px", "border-radius" : "4px", "border": "1px solid #666633", "background-color": "cccc66" }); 

    //CALCULATION OF SUGAR LEVELS 
    sugarunit = (parseInt($('#bar1').css("width")))/100; 
    sugaramount = sugarunit*data.sugar; 


    //MUST SET IMAGE HEIGHT 
    barheight = "10" 

    //VALUE ON BAR 
    bar_start = new Image(); 
    bar_start.src = "startcap.png"; 
    bar_start.height = barheight; 


    bar_middle = new Image(); 
    bar_middle.src = "midbar.png"; 
    bar_middle.height = barheight; 

    bar_end = new Image(); 
    bar_end.src = "endcap.png"; 
    bar_end.height = barheight; 

    //IF THE SUGAR INTAKE IS LESS THAN THE PIXEL WIDTH OF THE STARTING CAP 
    if (sugaramount<bar_start.width) { 
     bar_start.width=sugaramount; 
     sugarbar.appendChild(bar_start); 
     sugarbar.appendChild(bar_end); 
    } 

    //IF THE SUGAR INTAKE IS BETWEEN THE WIDTH OF THE STARTING CAP AND BEFORE THE END CAP CAN BEGIN 
    else if (sugaramount>=bar_start.width) { 
     sugarbar.appendChild(bar_start); 

     i = Math.floor(sugaramount-(bar_start.width+bar_end.width)); 

     for (j=1; j<=i; j++) { 
      sugarbar.appendChild(bar_middle); 
     } 

     bar_middle.width = sugaramount%10; 
     sugarbar.appendChild(bar_middle); 
     sugarbar.appendChild(bar_end); 
    } 
}

編輯：澄清時，使用appendChild不希望包括我所創建的圖像的多個實例。它只顯示一次，即使我寫了sugarbar.appendChild（bar_middle）;多次。是否有一個原因？

EDIT2：我做了一個的jsfiddle http://jsfiddle.net/7W6HY/1/如果你想嘗試玩了

來源

2012-08-03 tom c

你需要在每次調用這個函數的狀態變化。因此，當用戶輸入已消耗多少糖，這種情況下需要調用這個函數：

var input = document.getElementById('yourinput'); 
input.addEventListener('blur', showbar, false);

當然，我會建議傳遞paramater到具有糖量的showbar()功能。

但是，每次調用函數時，都需要從DOM中刪除其他圖像（或隱藏它們）。檢查圖像是否存在。如果確實如此，則將其刪除（或隱藏它）。

來源

2012-08-03 17:52:53

它不會改變輸入 - 這是一個PHP POST表單，我將值傳遞給JavaScript，因此它只有一個狀態 – 2012-08-03 17:58:11

放置由javascript生成的同一圖像的多個實例

回答

相關問題