昨天练习写了这个小demo，个人觉得通过设置定位元素left和top的值，来实现换行的功能，这种方法很巧妙~
另外，如下代码中的随机颜色的获取，还请各位前辈多多指教：需要改进的地方；或者有没有更好的方法。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 body{text-align: center;}
8 li{height:50px;width:50px;background:red;position:absolute;list-style:none;text-align: center;color:white;line-height:50px;}
9 </style>
10 <script type="text/javascript">
11 window.onload=function(){
12 var text1=document.getElementById("texta");
13 var btn1=document.getElementById("btn");
14 var ul1=document.getElementById("ul");
15 btn1.onclick=function(){
16 for(var i=0;i<parseInt(text1.value);i++){
17
18 var li1=document.createElement("li");
19 li1.style.left=li1.offsetLeft+i%20*64+"px";
20 li1.style.top=li1.offsetTop+parseInt(i/20)*64+64+"px"; // 实现换行
21 li1.innerHTML=i+1;
22 li1.style.background=random_load();
23 ul1.appendChild(li1);
24
25 }
26 }
27 }
28 function random_load(){
29 var R=hao(0,255).toString(16);
30 var G=hao(0,255).toString(16);
31 var B=hao(0,255).toString(16);
32 return "#"+aaa(R,G,B);
33 }
34 function hao(min,max){
35 return parseInt(Math.random()*(max-min+1)+min)
36 }
37 function aaa(r,g,b){
38 r=r.length==1?"0"+r:r;
39 g=g.length==1?"0"+g:g;
40 b=b.length==1?"0"+b:b; //随机会获取到5位的十六进制数，不能作为颜色值，所以用这个方法解决，还请前辈多多指点 ^-^！
41 return r+g+b;
42 }
43 </script>
44 </head>
45 <body>
46 <input type="text" name="texta" id="texta" value="" />
47 <input type="button" name="btn" id="btn" value="生成DIV" />
48 <ul id="ul">
49 </ul>
50 </body>
51 </html>
原文地址：https://www.cnblogs.com/mycognos/p/9153689.html
时间： 2024-08-10 17:17:38