直接上代码
有一点好奇怪的是,大转盘视觉上顺时针转的同时有时候会逆时针转几下,但是不影响最后的结果,搞不懂…
图片是随便找的一个
<!--大转盘html-->
<div class="wheel">
<div class="wheelBox">
<ul id="wheel" class="wheel-list">
<li style="transform: rotate(0deg);">
<i></i>
<div class="prize">
<img src="/assets/imgs/wheel/hyz1.png">
<p>一等奖</p>
</div>
</li>
<li style="transform: rotate(60deg);">
<i></i>
<div class="prize">
<img src="/assets/imgs/wheel/hyz2.png">
<p>二等奖</p>
</div>
</li>
<li style="transform: rotate(120deg);">
<i></i>
<div class="prize">
<img src="/assets/imgs/wheel/video1.png">
<p>三等奖</p>
</div>
</li>
<li style="transform: rotate(180deg);">
<i></i>
<div class="prize">
<img src="/assets/imgs/wheel/hyz3.png">
<p>四等奖</p>
</div>
</li>
<li style="transform: rotate(240deg);">
<i></i>
<div class="prize">
<img src="/assets/imgs/wheel/video2.png">
<p>五等奖</p>
</div>
</li>
<li style="transform: rotate(300deg);">
<i></i>
<div class="prize">
<img src="/assets/imgs/wheel/hyz4.png">
<p>安慰奖</p>
</div>
</li>
</ul>
<div class="wheel-btn"> //转盘指针
<img src="/assets/imgs/wheel/arrow.png">
</div>
</div>
<div class="quanBox">
<div class="quanDiv">
<div class="quanNum ft14"><img src="/assets/imgs/wheel/quan.png">抽奖券<strong class="ft20">X5</strong></div>
</div>
</div>
<ion-toolbar style="--min-height: auto;">
<button class="submitBtn ft14" shape="round" expand="block" (click)="try('安慰奖')">开始</button>
</ion-toolbar>
<img class="close" (click)="close()" src="/assets/imgs/wheel/close.png">
</div>
//css 按照UI设计的样式写
.wheel {
width: 81vw;
height: 78.3vw;
background: url("/assets/imgs/wheel/yinyingBg.png");
background-size: 100% 100%;
position: fixed;
left: 9.5vw;
top: 42vh;
z-index: 10000;
//height: 110vw;
border-radius: 1rem;
//margin-top: -55vw;
transform: translate(0px, -50%);
margin-top: 25vw;
.wheelBox{
position: relative;
width: 84vw;
left: -1.4vw;
.yun{
width: 67.5vw;
position: absolute;
bottom: -9.5vw;
left: 50%;
transform: translate(-50%);
z-index: 100;
}
}
.wheel-list {
width: 84vw;
height: 84vw;
background: url("/assets/imgs/wheel/wheelBg.png");
background-size: 100% 100%;
transition: all 3s ease-in-out;
position: relative;
z-index: 20;
display: block;
overflow: hidden;
margin: -50vw auto 0;
}
.wheel-list li {
position: absolute;
top: 0;
left: 0;
width: 84vw;
height: 42vw;
-moz-transform-origin: center bottom;
-webkit-transform-origin: center bottom;
-o-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
}
.wheel-list li i {
position: absolute;
top: 0;
left: 0;
margin-left: -50%;
display: block;
width: 100%;
height: 100%;
content: "";
transform: rotate(22.5deg) skewY(45deg);
}
.wheel-list .prize {
position: relative;
margin: 0 auto;
padding-top: 20px;
width: 50%;
overflow: hidden;
text-align: center;
height: 100%;
img {
height: 2.5rem;
margin-top: 1.5rem;
}
p {
color: #fff;
position: absolute;
bottom: 4.2rem;
width: 100%;
}
}
.wheel-pointer {
position: absolute;
z-index: 30;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 10vw;
height: 10vw;
}
.wheel-pointer i {
position: absolute;
z-index: 35;
top: -36px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 60px;
height: 60px;
overflow: hidden;
}
.wheel-btn {
position: absolute;
z-index: 40;
top: 50%;
left: 50%;
margin: auto;
width: 36vw;
transform: translate(-50%,-50%);
}
.quanBox {
//width: 70vw;
//height: 40vw;
//background: url(/assets/imgs/game/game_bg2.png);
background-size: 100% 100%;
margin: 0 7vw;
margin-top: 10vw;
display: flex;
align-items: flex-end;
.quanDiv {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.quanNum {
font-weight: bold;
color: #000;
display: flex;
align-items: center;
img {
width: 2.8rem;
margin-right: 0.3rem;
}
}
}
ion-toolbar.in-toolbar {
--background: none !important;
margin-top: 3vw;
}
.submitBtn {
height: 12vw;
width: 82%;
margin: 0 9%;
}
.close {
position: absolute;
bottom: -8vh;
left: 50%;
transform: translate(-50%);
width: 2.1rem;
z-index: 10001;
}
}
//ts
PrizeSon = ["一等奖" , "二等奖" , "三等奖" , "四等奖" , "五等奖" , "安慰奖" ] ;
totalNum = 6 ; // 转盘 总数
turnNum = [ 1 , 2 , 3 , 4 , 5 , 6 ]; //概率奖品 编号
isStatr = false ; //锁住 不可以再次点击 ;
lenCloc = 0 ;
turn = 3 ; //转盘旋转最低的圈数
//开始转
try(item){
if(!this.isStatr){
this.isStatr = true;
let random = this.PrizeSon.indexOf(item);
this.operation(random);
}else{
return false;
}
}
operation( ran ) {
var wheel = document.getElementById("wheel");
this.lenCloc++;
let Prize = this.turnNum[ran]-1 ;
let sun = this.turn*360 ; //最小圈数
if(Prize>=this.totalNum){
Prize = 0;
}
wheel.style.transform = "rotate("+(this.lenCloc*sun-Prize*60)+"deg)";
setTimeout(function () {
console.log(this.PrizeSon[Prize]); //传入安慰奖就会转到安慰奖
this.isStatr = false;
}.bind(this), 3000);
}