<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 600px;
background: red;
margin: 100px auto;
position: relative;
}
*{
margin: 0;
padding: 0;
}
input{
width: 100px;
height: 50px;
background: yellow;
position: absolute;
left: 50%;
margin-left: -50px;
font-size: 20px;
text-align: center;
}
.loading{
width: 300px;
height: 100px;
background: white;
position: absolute;
top: 80px;
left: 50%;
margin-left: -150px;
line-height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
/*display: none;*/
}
.jiang{
width: 300px;
height: 100px;
background: white;
position: absolute;
top: 80px;
left: 50%;
margin-left: -150px;
line-height: 100px;
display: none;
}
ol,ul{
list-style: none;
}
ul{
float: left;
overflow: hidden;
margin-top:35px;
}
ul li{
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
text-align: center;
line-height: 30px;
color: white;
float: left;
margin-left: 5px;
}
ol{
float: right;
overflow: hidden;
margin-top:35px;
}
ol li{
width: 30px;
height: 30px;
background: green;
border-radius: 50%;
text-align: center;
line-height: 30px;
color: white;
float: left;
}
</style>
</head>
<body>
<div class="box">
<input type="button" value="点击抽奖">
<div class="loading">请开始摇奖</div>
<div class="jiang">
<ul>
<!-- <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li> -->
</ul>
<ol>
<!-- <li>1</li> -->
</ol>
</div>
</div>
</body>
<script>
function $(x){
return document.querySelector(x)
}
var btn =$("[type=button]");
btn.onclick = function(){
var redNum=6;
var blueNum=1;
var redList=[];
var blueList=[];
var redHtml="";
var blueHtml="";
for(var i=0;i<redNum;i++) {
redList.push(random(1,33))
console.log(redList)
}
for(var i=0;i<blueNum;i++) {
blueList.push(random(1,16))
}
for(var h = 0;h<redList.length;h++){
if(redList[h]<10){
redHtml+="<li>0"+redList[h]+"</li>"
}else{
redHtml+="<li>"+redList[h]+"</li>"
}
}
if(blueList[0]<10) {
blueHtml+="<li>0"+blueList[0]+"</li>"
} else{
blueHtml+="<li>"+blueList[0]+"</li>"
}
$(".jiang ul").innerHTML=redHtml;
$(".jiang ol").innerHTML=blueHtml;
setStyle(".loading","display","none");
setStyle(".jiang","display","block");
}
function setStyle(){
$(arguments[0]).style[arguments[1]]=arguments[2];
}
function random(m,n){
var num=Math.max(m,n)-Math.min(m,n);
return Math.round(Math.random()*num+Math.min(m,n));
}
</script>
</html>