放置javascript生成的同一图像的多个实例

Placing multiple instances of the same image generated by javascript

本文关键字：图像 实例 javascript 放置      更新时间：2023-09-26

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

仪表本身就是一个图形，我把它分为三部分：一个开始的盖子，一个中间的盖子和一个结束的盖子。请参阅以下链接：https://i.stack.imgur.com/bVUwK.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），它也只显示一次；多次。这是有原因的吗？

第二版：我做了一把小提琴http://jsfiddle.net/7W6HY/1/如果你想试着用它玩

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

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

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

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

相关文章：