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

来源:互联网 发布:凡科建站域名绑定 编辑:程序博客网 时间:2024/05/16 10:45

点击生成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>

这里写图片描述

0 0
原创粉丝点击