【javascript】06 JS基础下 (自动生成100个LI-只能用定位实现)

自动生成100个LI-只能用定位实现
作业要求,如图:

【javascript】06JS基础下(自动生成100个LI-只能用定位实现)

做了很久,只能做到下面这样,0到10,然后循环每一行。图中的0到99做不出来,求指点 ...

代码片段 1

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创造出100li</title>
<style type="text/css">
ul{margin: 0;padding: 0; position: relative;}
li{list-style: none; width: 50px;height: 50px;
position: absolute;border: 1px solid #000000;
line-height: 50px;text-align: center;font-size: 20px;}
</style>
<script type="text/javascript">
window.onload = function(){

var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul");

var onOff = true;
var arr = [ 'red','yellow','blue','green']

oBtn.onclick =function(){

    for(var i=0; i< 11; i++) {
        for (var j=0; j < 10; j++) {
            var aLi = document.createElement('li');
            aLi.style.left = [i * 55] + 'px';
            ul.appendChild(aLi);
            if (i<11){
                aLi.style.top = [i*55] + 'px';
                aLi.style.top = [j*55] + 'px';
            }
            aLi.style.backgroundColor = arr [i % arr.length];
            aLi.innerHTML = i;
        }

    }
}

}
</script>
</head>

<body>
<input type="button" id="btn" value="自动生成100个LI"/>
<ul id="ul">

</ul>
</body>
</html>
[/code]

修改后的js 从0到100

代码片段 2

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复