0

我正在制作一个测试页面，用户在其中输入他们消耗了多少糖，然后生成一个图形仪表，向他们显示该值如何对应于每日推荐的糖摄入量。

仪表本身是一个图形，我将其分为三个部分：开始盖、中间盖和结束盖。请参阅以下链接：http: //i.imgur.com/CfFI7.jpg

我的问题是我当前正在运行的代码不想在包含的 div 中附加一个以上中间部分的实例。在这种情况下，我只需更改图形该部分的宽度就足够了，但我宁愿能够将图形复制 x 次，直到它填充适当数量的条。图形的每个部分（开始、中间和结束）都是 10 像素宽。

注意：我正在尝试对其进行编码，以便它根据我在 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/

4

1 回答 1

0

每次状态更改时，您都需要调用此函数。因此，当用户输入消耗了多少糖时，该事件需要调用此函数：

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

当然，我建议将参数传递给showbar()具有糖量的函数。

但是，每次调用该函数时，都需要从 DOM 中删除其他图像（或隐藏它们）。检查图像是否存在。如果是，则将其删除（或隐藏）。

于 2012-08-03T17:52:53.093 回答