原生JS写了一个小demo,根据输入的数字生成不同…

2018-06-24 02:14:55来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

昨天练习写了这个小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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:dtree的自定义select动作

下一篇:用javascript编写地区表单ES6