Javascript中的五彩纸屑

我试图让我的代码在一个盒子里随机放置50个随机着色的圆圈，或“五彩纸屑”。到目前为止，只在框的左上角出现一个黑色圆圈

“严格使用”；
window.onload=函数（）{
document.onclick=create；
};
功能微调（数据）{
var启动；
var空白；
var端；
var结果；
如果（数据类型==“字符串”）{
空白=“\n\r\t\f”；
开始=0；
}否则{
结果=数据；
}
while（（start=0）和&（whitespace.indexOf（data.charAt（end）））{
结束=结束-1；
};
如果（结束<开始）{
结果=”；
}否则{
结果=数据。子字符串（1+开始，结束）；
}
返回结果；
};
函数getRandomInteger（上限）{
返回Math.floor（Math.random（）*（上限+1））；
};
函数getRandomRGB（）{
蓝变种；
绿色变种；
变种红；
红色=getRandomInteger（255）；
蓝色=getRandomInteger（255）；
绿色=getRandomInteger（255）；
返回“rgb”（“+红色+”、“+绿色+”、“+蓝色+”）；
};
函数createHtmleElement（elementType、id、classInfo、content）{
if（elementType==null）{
elementType=“”；
};
修剪（elementType）；
如果（id==null）{
id=“”；
}
修剪（id）；
如果（id.length>0）{
id=“”+”id=“+””“+id+”“+”；
};
如果（classInfo==null）{
classInfo=“”；
}
修剪（classInfo）；
如果（classInfo.length>0）{
classInfo=“”+”类=“+””“+classInfo+””；
}
如果（内容===null）{
content=“”；
};
修剪（内容）；
返回“”+内容+
'';
};
函数CreateConfitti（容器ID，数量）{
var元素；
var i；
var idPrefix；
var结果；
结果=”；
idPrefix=“圆圈”；
i=0；
元素=document.getElementById（idPrefix+i）；
而（我<多少人）{
结果=结果+CreateHtmleElement（“span”、idPrefix+i、“五彩纸屑”和“&bull；”）；
i=i+1；
}//而
document.getElementById（containerId）.innerHTML=result；
而（我<多少人）{
document.getElementById（idPrefix+i）.style.color=getRandomRGB（）；
document.getElementById（idPrefix+i）.style.top=getRandomInteger（offsetHeight-4）+“px”；
document.getElementById（idPrefix+i）.style.left=getRandomInteger（offsetWidth-4）+“px”；
i=i+1；
}//而
};
函数create（）{
制作彩色纸屑（“容器”，50）；
};
{
边界：0；
保证金：0；
填充：0；
}
身体{
字体系列：“时代新罗马”，衬线；
字号：12号；
}
#容器{
边框：2件纯黑；
高度：10公分；
线高：.9em；
左边距：自动；
右边距：自动；
位置：相对位置；
宽度：30em；
}
.五彩纸屑{
字号：3em；
位置：绝对位置；
}

五彩纸屑第1部分
找到了什么东西

idPrefix = "circles";
    i      = 0;
    element = document.getElementById( idPrefix+i );
    while( i < howMany )
    {
    result=result+createHTMLElement("span", idPrefix+i, "confetti", "&bull;");
    i = i+1;
    }//while
    document.getElementById(containerId).innerHTML=result;

idPrefix=“圆圈”；
i=0；
元素=document.getElementById（idPrefix+i）；
而（我<多少人）
{
结果=结果+CreateHtmleElement（“span”、idPrefix+i、“五彩纸屑”和“&bull；”）；
i=i+1；
}//当
document.getElementById（containerId）.innerHTML=result；

此时，i=50，不会进入下一个循环

    while( i < howMany )
    {

while（我<多少人）
{
您有两个问题：

两个循环使用相同的变量（i）。但不会将i重置回零。其次，您只需引用offsetHeight和offsetWidth。我假设您指的是容器的宽度和高度？因此更新后的代码应如下所示：

  i=0;
  while (i < howMany) {
    document.getElementById(idPrefix + i).style.color = getRandomRGB();
    document.getElementById(idPrefix + i).style.top = getRandomInteger(document.getElementById(containerId).offsetHeight - 4) + "px";
    document.getElementById(idPrefix + i).style.left = getRandomInteger(document.getElementById(containerId).offsetWidth - 4) + "px";
    i = i + 1;
  } //while

i=0；
而（我<多少人）{
document.getElementById（idPrefix+i）.style.color=getRandomRGB（）；
document.getElementById（idPrefix+i）.style.top=getRandomInteger（document.getElementById（containerId）.offsetHeight-4）+“px”；
document.getElementById（idPrefix+i）.style.left=getRandomInteger（document.getElementById（containerId）.offsetWidth-4）+“px”；
i=i+1；
}//而


“严格使用”；
window.onload=函数（）{
document.onclick=create；
};
功能微调（数据）{
var启动；
var空白；
var端；
var结果；
如果（数据类型==“字符串”）{
空白=“\n\r\t\f”；
开始=0；
}否则{
结果=数据；
}
while（（start=0）和&（whitespace.indexOf（data.charAt（end）））{
结束=结束-1；
};
如果（结束<开始）{
结果=”；
}否则{
结果=数据。子字符串（1+开始，结束）；
}
返回结果；
};
函数getRandomInteger（上限）{
返回Math.floor（Math.random（）*（上限+1））；
};
函数getRandomRGB（）{
蓝变种；
绿色变种；
变种红；
红色=getRandomInteger（255）；
蓝色=getRandomInteger（255）；
绿色=getRandomInteger（255）；
返回“rgb”（“+红色+”、“+绿色+”、“+蓝色+”）；
};
函数createHtmleElement（elementType、id、classInfo、content）{
if（elementType==null）{
elementType=“”；
};
修剪（elementType）；
如果（id==null）{
id=“”；
}
修剪（id）；
如果（id.length>0）{
id=“”+”id=“+””“+id+”“+”；
};
如果（classInfo==null）{
classInfo=“”；
}
修剪（classInfo）；
如果（classInfo.length>0）{
classInfo=“”+”类=“+””“+classInfo+””；
}
如果（内容===null）{
content=“”；
};
修剪（内容）；
返回“”+内容+
'';
};
函数CreateConfitti（容器ID，数量）{
var元素；
var i；
var idPrefix；
var结果；
结果=”；
idPrefix=“圆圈”；
i=0；
元素=document.getElementById（idPrefix+i）；
而（我<多少人）{
结果=结果+CreateHtmleElement（“span”、idPrefix+i、“五彩纸屑”和“&bull；”）；
i=i+1；
}//而
document.getElementById（containerId）.innerHTML=result；
i=0；
而<