界面参考:点击打开链接
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";
}
效果图:
缺陷:
(1)没有做移动端的自适应;
(2)代码没有封装;
(3)每次转时,不能从上次的位置开始,每次都从第一个开始;
(4)这个是转盘在转,没有做指针转的版本。
注:只用js实现了,还没用jq实现。
后面又做了bug修复和优化,链接:点击打开链接