生成100个Div

Posted gyc51

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了生成100个Div相关的知识,希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
#div1{position:relative;}
#div1 div{width:50px;height:50px;position:absolute;font-size:30px;color:#fff;text-align:center;line-height:50px;}
</style>
<body>
<script>

window.onload = function()
{

var oBtn = document.getElementById(‘btn1‘);
var oDiv = document.getElementById(‘div1‘);
var arrColor = [‘red‘,‘green‘,‘blue‘];
var str = ‘‘;
oBtn.onclick = function()
{
for(var i=0;i<100;i++)
{
//left
//0*60 1*60 2*60
//0*60 1*60 2*60
//top
//0 0 0 0 0 0 (0-9)/10 不大于1的小数
//1*60 60 60 (10-19)/10 不大于 2 的小数
//2*60
//3*60

str += ‘<div style="left:‘+(i%10*60)+‘px;top:‘+(Math.floor((i/10))*60)+‘px;background:‘+arrColor[i%arrColor.length]+‘;">‘+(i+1)+‘</div>‘;
};

oDiv.innerHTML = str;
};

}

</script>
<input type="button" id="btn1" value="生成一百个Div" >

<div id="div1">

</div>

</body>


</html>技术分享图片








































以上是关于生成100个Div的主要内容,如果未能解决你的问题,请参考以下文章

javascript动态生成100个div,每逢10就换一行。请问怎么计算div的TOP值,还有这个效果怎么实现。

怎样循环生成10个div

js生成div,如何使15个div成一行,满15个自动换到下一行

JavaScript如何在div中动态生成<p>

js生成div

在JS里动态生成DIV的问题