<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #div1{width:800px;height:1000px;position:relative;margin: 0 auto;} #btn{margin:20px 45px;} #div1 div{width:60px;height:60px;background:#ffc;display:inline-block;position:absolute; border:1px solid #ccc;} </style> <script type="text/javascript"> window.onload=function(){ var div= document.getElementById('div1'); var btn= document.getElementById('btn'); arr=['red','yellow','blue','green']; var str=""; for(var i=0;i<100;i++){ str += "<div>"+ (i+1) +"</div>"; } var lis=div.getElementsByTagName('div'); btn.onclick=function(){ div.innerHTML+=str; for(var i=0; i<lis.length; i++){ lis[i].style.left=(70+5)*(i%10)+'px'; lis[i].style.top=(70+5)*Math.floor(i/10)+'px'; lis[i].style.background=arr[i%4]; } } } </script> </head> <body> <input id="btn" type="button" value="自动生成100个div" /> <div id="div1"></div> </body> </html>
javascript:第二章自动生成100个li!练习!
原创
©著作权归作者所有:来自51CTO博客作者多多哇的原创作品,如需转载,请与作者联系,否则将追究法律责任
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
第二章 随堂练习【计组】
第二章 随堂练习【计组】
计组 补码 乘法器 16进制