幸运大转盘2

最新推荐文章于 2025-09-08 21:59:39 发布

原创最新推荐文章于 2025-09-08 21:59:39 发布 · 660 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css js 幸运大转盘

js 同时被 2 个专栏收录

137 篇文章

订阅专栏

css

44 篇文章

订阅专栏

解决不能从上次的位置开始转的bug。

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/index2.js"></script>
</body>
</html>

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;
	transition: all 5s;
}
.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;
}

index2.js

function getId(id){  
    return document.getElementById(id);  
}  
var deg=0;
var rotate=0;
var times=1;
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元红包
        rotate=1080*times;
        deg=0;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)";
        setTimeout("show(1)",6000);   
    }  
    if(num==2){ //平板  
        rotate=1080*times+45;
        deg=45;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)"; 
        setTimeout("show(2)",6000);  
    }  
    if(num==3){ //笔记本电脑  
        rotate=1080*times+90;
        deg=90;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)"; 
        setTimeout("show(3)",6000);  
    }  
    if(num==4){ //一张优惠券  
        rotate=1080*times+135;
        deg=135;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)";  
        setTimeout("show(4)",6000);  
    }  
    if(num==5){ //一张电影票  
        rotate=1080*times+180;
        deg=180;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)";   
        setTimeout("show(5)",6000);  
    }  
    if(num==6){ //优酷会员  
        rotate=1080*times+225;
        deg=225;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)";  
        setTimeout("show(6)",6000);  
    }  
    if(num==7){ //谢谢惠顾  
        rotate=1080*times+270;
        deg=270;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)";   
        setTimeout("show(7)",6000);  
    }  
    if(num==8){ //88元红包  
        rotate=1080*times+315;
        deg+315;
        ++times;
        getId("con").style.transform="rotate("+rotate+"deg)";   
        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;  
    }  
}

关键点：

（1）css中设置transItion；

（2）js中设置transform:rotate...，角度旋转每次转到指定的角度，而且默认从当前位置开始，而不是像animate返回到最开始处。
缺陷：

（1）还没有进行封装；

（2）没有做自适应。

如果要封装的话，可以封装这些参数：物品数/每一个物品的概率/抽奖次数/每次至少旋转圈数...