放置由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生成的同一图像的多个实例

回答

相关问题