<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>球球</title>
<linkrel="stylesheet" type="text/css"href="css/qiu.css">
</head>
<script>
//首先写function方法
function oppo(){
//定义一个数组让它随机
var reds=[parseInt(Math.random()*33+1)];
//while循环 reds的长度小于6
while(reds.length<6){
//定义一个数组看让 a=上面定义的一个数组
var a=parseInt(Math.random()*33+1);
for (var i= 0;i<reds.length;i++) {
//判断reds的长度是否等于a 如果等于就退出循环
if (reds[i]==a) {
break;
//否则如果 length-1 代表最后一个元素
}else if(i==reds.length-1){
reds.push(a); //添加新数组
}
}
}
function compare(a,b){return a-b}; //sort排序
reds.sort(compare);
for(var p=0;p<reds.length;p++){
document.getElementById("red"+p+"").innerHTML=reds[p];
}
document.getElementById("blue").innerHTML=parseInt(Math.random()*16+1);
}
</script>
<body>
<div id="head">
<divid="red0"></div>
<divid="red1"></div>
<divid="red2"></div>
<divid="red3"></div>
<divid="red4"></div>
<divid="red5"></div>
<divid="blue"></div>
</div>
<button οnclick="oppo()">点我试一下</button>
</body>
</html>
#red0,#red1,#red2,#red3,#red4,#red5{
width:30px;
height:28px;
border-radius:50%;
border:2px solid #f00;
display:inline-block;
}
#blue{
width:30px;
height:28px;
border-radius:50%;
border:2px solid blue;
display:inline-block;
}