点击生成10个随机颜色的li

点击生成10个随机颜色的li

html以及css部分：

<style>
        body,ul{
            margin:0;
            padding:0;
        }
        li{
            display:inline-block;
            list-style: none;
            text-align:center;
            margin-left:5px;
            margin-bottom:5px;
            width: 50px;
            height: 50px;
            border:1px #000 solid;
            background:red;
            line-height:50px;
            font-size:25px;
        }
    </style>

<input class="btn" type="button" value="点击生成10个li"/>
<ul class="list"></ul>

点击按钮，将生成的10个带有随机颜色的li标签插入到ul标签中

<script>
    window.onload=function(){
        var btn=document.getElementsByClassName("btn")[0];
        var list=document.getElementsByClassName("list")[0];
        var colors=["blue","purple","pink","yellow","green","red"];
        function selectFrom(min,max){
            var num =max-min+1;
            return Math.floor(Math.random()*num+min);
        }
        //生成随机颜色
        btn.onclick=function(){
            for(var i=0;i<10;i++){
                var Ele=document.createElement("li");
//                Ele.innerHTML=i+1;也可以达到添加数字的效果
                var txt=document.createTextNode(i+1);
//                Ele.childNodes[0].nodeValue=txt;因为创建的li没有内容，所以它并没有文本节点，直接更改不会成功
                Ele.appendChild(txt);            Ele.style.backgroundColor=colors[selectFrom(0,colors.length-1)];
                list.appendChild(Ele);
            }
        };
    };
</script>