Html
    Css
    Js

    
                        
/*外框*/
#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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.1
 立即下载

简易老虎机效果(内含每步中文解答)

内附详细中文解说,基本每一行代码都有内容功能解答,一目了然,纯Js手打

0