/*外框*/
#parent {
width:1150px;
height:600px;
border:3px solid black;
margin:0px auto;
padding:30px;
position:relative;
top:10px;
left:10px;
background:#00BFFF;
}
/*跑圈框*/
#box {
width:470px;
height:470px;
border:2px solid black;
padding:10px;
position:relative;
top:80px;
left:60px;
background:pink;
}
/*跑圈div*/
#parent #box div {
width:94px;
height:94px;
border:1px solid black;
float:left;
margin:10px 10px;
top:20px;
left:20px;
color:red;
font-weight:bold;
}
/*中奖信息框*/
#message {
width:500px;
height:490px;
border:2px solid black;
position:relative;
top:-415px;
left:600px;
overflow:hidden;
}
/*跑圈div定位*/
#parent #box div:nth-of-type(6) {
width:210px;
height:210px;
}
#parent #box div:nth-of-type(9) {
margin-top:-106px;
}
/*开始按钮*/
#btn {
width:80px;
height:80px;
position:absolute;
top:20px;
left:300px;
border-radius:50%;
background:blue;
}
/*投币按钮*/
#coins {
width:80px;
height:80px;
position:absolute;
top:20px;
left:90px;
border-radius:50%;
background:blue;
}
/*余额*/
span {
position:absolute;
left:230px;
top:50px;
}
/*红色div*/
.box {
background:blue;
}
/*透明度:opacity:0.5;
*/
/*得分div*/
#parent #message div {
width:500px;
height:490px;
border:2px solid black;
position:absolute;
top:492px;
left:-2px;
background:pink;
}
/*右边中奖信息提示框*/
#parent #message div:nth-of-type(1) {
color:red;
display:none;
}
#parent #message div:nth-of-type(2) {
color:red;
display:none;
}
#parent #message div:nth-of-type(3) {
color:red;
display:none;
}
#parent #message div:nth-of-type(4) {
color:green;
display:none;
}
#parent #message div:nth-of-type(5) {
color:green;
display:none;
}
#parent #message div:nth-of-type(6) {
color:black;
display:none;
}
#parent #message div:nth-of-type(7) {
color:blue;
display:none;
}
#parent #message div:nth-of-type(8) {
color:deepskyblue;
display:none;
}
#parent #message div:nth-of-type(9) {
color:black;
display:none;
}
#parent #message div:nth-of-type(10) {
color:blue;
display:none;
}
#parent #message div:nth-of-type(11) {
color:deepskyblue;
display:none;
}
#parent #message div:nth-of-type(12) {
color:black;
display:none;
}
#parent #message div:nth-of-type(13) {
color:black;
display:none;
}
内附详细中文解说,基本每一行代码都有内容功能解答,一目了然,纯Js手打