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