生成随机数div div

我无法让脚本创建随机数量的div。在这个5到20之间的特定示例中。问题出现在for循环中？生成随机数的函数在随机颜色函数中正常工作，我猜这是由于某些原因而无法识别的。此外，我没有在萤火虫中发现任何错误。生成随机数div div

例：

function generateDiv(){ 
    var dfrag = document.createDocumentFragment(); 
    var count = generateRandom(5, 20); 
    var i=0; 
    for (var i = 0; i < count; i++){ 
     var div = document.createElement("div"); 
     dfrag.appendChild(div); 
    } 
} 
var divs = document.getElementsByTagName("div"); 
for (i = 0; i < divs.length; i++) { 
    div = divs[i]; 
    alterDivStyle(div); 
} 
function rndColor() { 
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red 
      g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green 
      b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue 
    return '#' + r + g + b; 
} 

function generateRandom(min, max) { 
    var number = Math.floor(Math.random() * (max - min)) + min; 
    return number; 
} 
function alterDivStyle(div){ 
    div.style.width = generateRandom(20, 100) +"px"; 
    div.style.height = generateRandom(20, 100) +"px"; 
     div.style.backgroundColor = rndColor(); 
    div.style.color = rndColor(); 
    div.style.position = "absolute"; 
    div.style.border = "solid"; 
    div.style.borderColor = rndColor(); 
    div.style.borderWidth = rndColor(); 
    div.style.borderRadius = generateRandom(0, 10)+"px"; 
    div.innerHTML = "<strong>div</strong>"; 
};

来源

2013-08-23 Henry Lynx

更改样式代码不在函数中。 – jcubic

你永远不添加的文档片段的DOM

“DocumentFragments是DOM节点他们从来不是主要的DOM树的一部分，通常的用例是创建。文档片段，将元素附加到文档片段中，然后将文档片段附加到DOM树中。在DOM树中，文档片段被其所有子项取代。

https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

来源

2013-08-23 09:44:28

谢谢我做到了document.body.appendChild（dfrag）;现在很好。 –

1）你在错误的地方封闭的“generateDiv功能”，从之前移动右括号的“VAR的div”到“VAR div的”循环之后。

2）您正在更改DOM中所有现有的div： var divs = document.getElementsByTagName（“div”）; 不要那样做，使用dfrag。

3）像马修说的，你必须添加dfrag到DOM。

来源

2013-08-23 09:54:51

function generateDiv(){ 
    var dfrag = document.createDocumentFragment(); 
    var count = generateRandom(5, 20); 
    var i=0; 
    for (var i = 0; i < count; i++){ 
    var div = document.createElement("div"); 
    dfrag.appendChild(div); 
    } 
    for (i = 0; i < dfrag.childNodes.length; i++) { 
    div = dfrag.childNodes[i]; 
    alterDivStyle(div); 
    } 
    document.body.appendChild(dfrag); 
} 
function rndColor() { 
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red 
    g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green 
    b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue 
    return '#' + r + g + b; 
} 

function generateRandom(min, max) { 
    var number = Math.floor(Math.random() * (max - min)) + min; 
    return number; 
} 
function alterDivStyle(div){ 
    div.style.width = generateRandom(20, 100) +"px"; 
    div.style.height = generateRandom(20, 100) +"px"; 
    div.style.backgroundColor = rndColor(); 
    div.style.color = rndColor(); 
    div.style.position = "absolute"; 
    div.style.border = "solid"; 
    div.style.borderColor = rndColor(); 
    div.style.borderWidth = rndColor(); 
    div.style.borderRadius = generateRandom(0, 10)+"px"; 
    div.innerHTML = "<strong>div</strong>"; 
}; 
generateDiv();

来源

2013-08-23 10:02:14 xiaojue

生成随机数div div

回答

相关问题