抽奖转盘实现-优快云博客

index.html

<!DOCTYPE html>
<html>
<head>
	<title>转盘</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="con" id="con">
		<div class="sec1">
			<p>8元红包</p>
		</div>
		<div class="sec2">
			<p>88元红包</p>
		</div>
		<div class="sec3">
			<p>谢谢惠顾</p>
		</div>
		<div class="sec4">
			<p>优酷会员</p>
		</div>
		<div class="sec5">
			<p>一张电影票</p>
		</div>
		<div class="sec6">
			<p>一张优惠券</p>
		</div>
		<div class="sec7">
			<p>笔记本电脑</p>
		</div>
		<div class="sec8">
			<p>平板</p>
		</div>
	</div>
	<div class="tri"></div>
	<div class="cen" id="cen">
		<div class="cen_con">
			<p>点击开始</p>
			<p><span id="cen_count">3</span>次</p>
		</div>
	</div>
	<div id="res">
		<div class="res_d1" id="res_d1">×</div>
		<div class="res_d2">
			<div class="res_d2_p">
				<p>恭喜您获得：</p>
				<p id="get_thing"></p>
			</div>
			<button id="btn_sure">确定</button>
		</div>
	</div>

	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

common.css:

body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre,p{
	margin:0;
	padding: 0;
	border: 0;
} 
a{
	text-decoration: none;
}

index.css:

body{
	background: #1E0D45;
}
.con{
	position: absolute;
	top: 100px;
	left: 30%;
	width: 400px;
	height: 400px;
	border: 6px solid #D5AF75;
	border-radius: 50%;
	background: #FCE9C7;
}
.sec1{
	position: relative;
	left: 42%;
	top: 5%;
}
.sec2{
	position: relative;
	left: 60%;
	top: 34%;
	transform: rotate(30deg);
}
.sec3{
	position: relative;
	left: 35%;
	top: 74%;
	transform: rotate(90deg);
}
.sec4{
	position: relative;
	left: 7%;
	top: 88%;
	transform: rotate(120deg);
}
.sec5{
	position: relative;
	left: -39%;
	top: 65%;
	transform: rotate(180deg);
}
.sec6{
	position: relative;
	left: -64%;
	top: 25%;
	transform: rotate(210deg);
}
.sec7{
	position: relative;
	left: -40%;
	top: -25%;
	transform: rotate(270deg);
}
.sec8{
	position: relative;
	left: 10%;
	top: -40%;
	transform: rotate(-30deg);
}
.sec1 p,.sec2 p,.sec3 p,.sec4 p,.sec5 p,.sec6 p,.sec7 p,.sec8 p{
	color: #CE3237;
}
.cen{
	position: absolute;
	top: 14%;	
	left: 30%;
	width: 150px;
	height: 150px;
	margin: 125px;
	border: 6px solid #FA4653;
	border-radius: 50%;
	background: #FEF0D6;
	cursor: pointer;
}
.tri{
	position: absolute;
	left: 44.5%;
	top: 30%;
	width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid #FA4653;
}
.cen_con{
	margin: auto;
	margin-top: 50px;
}
.cen p{
	color: #FA4653;
	text-align: center;
	font-size: 20px;
	font-weight: 900;
}
#res{
	position: fixed;
	top: 50px;
	left: 25%;
	width: 50%;
	z-index: 1;
	display: none;
}
.res_d1{
	position: relative;
	left: 95%;
	top: -10px;
	width: 30px;
	height: 30px;
	color: #FFF;
	border: 2px solid #FFF;
	border-radius: 50%;
	font-size: 30px;
	text-align: center;
	line-height: 26px;
	cursor: pointer;
}
.res_d2{
	background: #FCEACB;
	height: 500px;
	border-radius: 10px;
	font-size: 25px;
	text-align: center;
}
.res_d2_p{
	padding-top: 10%;
	font-weight: 800;
}
#btn_sure{
	display: block;
	position: relative;
	top: 30%;
	left: 37%;
	width: 150px;
	height: 50px;
	font-size: 22px;
	color: #FFF8EB;
	background: #BC9C6E;
	border: none;
	outline: none;
	border-radius: 3px;
	cursor: pointer;
}

@keyframes move1{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1440deg);
	}
}
@keyframes move2{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1485deg);
	}
}
@keyframes move3{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1530deg);
	}
}
@keyframes move4{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1575deg);
	}
}
@keyframes move5{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1620deg);
	}
}
@keyframes move6{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1665deg);
	}
}
@keyframes move7{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1710deg);
	}
}
@keyframes move8{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(1755deg);
	}
}

index.js:

function getId(id){
	return document.getElementById(id);
}
cen.onclick=function(){
	var count=parseInt(getId("cen_count").innerHTML);
	if(count<=0){
		return;
	}
	console.log("开始动画");
	var ran=Math.random();
	var num=100;
	if(ran>0.05&&ran<0.06){ //8元红包 0.01/1=1%概率
		num=1;
	}else if(ran>0.15&&ran<0.152){ //平板 0.002/1=0.2%概率
		num=2;
	}else if(ran>0.25&&ran<0.251){ //笔记本电脑 0.001/1=0.1%概率
		num=3;
	}else if(ran>0.35&&ran<0.38){ //一张优惠券 0.03/1=3%概率
		num=4;
	}else if(ran>0.45&&ran<0.46){ //一张电影票 0.01/1=1%概率
		num=5;
	}else if(ran>0.55&&ran<0.56){ //优酷会员 0.01/1=1%概率
		num=6;
	}else if(ran>0.60&&ran<0.70){ //谢谢惠顾 0.1/1=10%概率
		num=7;
	}else if(ran>0.75&&ran<0.755){ //88元红包 0.005/1=0.5%概率
		num=8;
	}else{ //谢谢惠顾 100%-0.2%-0.1%-3%-1%-1%-10%-0.5%=84.2%  总概率:84.2%+10%=94.2%
		num=7;
	}

	console.log("num="+num);
	if(num==1){ //8元红包
		getId("con").style.animation="move1 5s forwards ease-in-out";
		setTimeout("show(1)",6000);	
	}
	if(num==2){ //平板
		getId("con").style.animation="move2 5s forwards ease-in-out";
		setTimeout("show(2)",6000);
	}
	if(num==3){ //笔记本电脑
		getId("con").style.animation="move3 5s forwards ease-in-out";
		setTimeout("show(3)",6000);
	}
	if(num==4){ //一张优惠券
		getId("con").style.animation="move4 5s forwards ease-in-out";
		setTimeout("show(4)",6000);
	}
	if(num==5){ //一张电影票
		getId("con").style.animation="move5 5s forwards ease-in-out";
		setTimeout("show(5)",6000);
	}
	if(num==6){ //优酷会员
		getId("con").style.animation="move6 5s forwards ease-in-out";
		setTimeout("show(6)",6000);
	}
	if(num==7){ //谢谢惠顾
		getId("con").style.animation="move7 5s forwards ease-in-out";
		setTimeout("show(7)",6000);
	}
	if(num==8){ //88元红包
		getId("con").style.animation="move8 5s forwards ease-in-out";
		setTimeout("show(8)",6000);
	}

	--count;
	getId("cen_count").innerHTML=count;

	console.log("动画结束");
}

res_d1.onclick=function(){
	getId("res").style.display="none";
}
btn_sure.onclick=function(){
	getId("res").style.display="none";
}

function show(num){
	getId("res").style.display="block";
	switch(num){
		case 1:
			getId("get_thing").innerHTML="8元红包";
			break;
		case 2:
			getId("get_thing").innerHTML="平板";
			break;
		case 3:
			getId("get_thing").innerHTML="笔记本电脑";
			break;
		case 4:
			getId("get_thing").innerHTML="一张优惠券";
			break;
		case 5:
			getId("get_thing").innerHTML="一张电影票";
			break;
		case 6:
			getId("get_thing").innerHTML="优酷会员";
			break;
		case 7:
			getId("get_thing").innerHTML="谢谢惠顾";
			break;
		case 8:
			getId("get_thing").innerHTML="88元红包";
			break;
	}
	getId("con").style.animation="none";
}

效果图：