原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~
Posted mycognos
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~相关的知识，希望对你有一定的参考价值。
昨天练习写了这个小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>
以上是关于原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~的主要内容，如果未能解决你的问题，请参考以下文章
每天一个JS 小demo之原生数组splice方法书写。主要知识点：锻炼思维逻辑能力，对于数组方法的理解和各种情况的考量