阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果
效果图
JS 转盘抽奖效果
前置条件：
开发环境：windows
开发框架：js
编辑器：HbuilderX
正文开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="熊仔其人">
<title>转盘抽奖效果</title>
<!-- 这里是css部分 -->
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.outher,.wapper{
position: relative;
width: 300px;
height: 300px;
background-color: red;
border-radius: 50%;
overflow: hidden;
}
.wapper{
transform: rotate(22.5deg);
}
.left,.right{
width: 150px;
height: 100%;
overflow: hidden;
position: absolute;
}
.left div,.right div{
position: absolute;
width: 150px;
height: 100%;
}
.left div{
transform-origin:right center;
}
.right div{
transform-origin:left center;
}
.left{
left: 0;
background-color: burlywood;
}
.right{
right: 0;
background-color: blue;
}
.left div.one{
background-color: #fc7c78;
}
.left div.two{
background-color: #f59462;
transform: rotate(-45deg);
}
.left div.three{
background-color: #fc7c78;
transform: rotate(-90deg);
}
.left div.four{
background-color: #f59462;
transform: rotate(-135deg);
}
.right div.one{
background-color: #f59462
}
.right div.two{
background-color: #fc7c78;
transform: rotate(45deg);
}
.right div.three{
background-color: #f59462;
transform: rotate(90deg);
}
.right div.four{
background-color: #ffffff;
transform: rotate(135deg);
}
.left .text{
position: absolute;
left: 50%;
top:30px;
transform: rotate(-30deg);
}
.right .text{
position: absolute;
left: 12%;
top:30px;
transform: rotate(30deg);
}
.circle{
position: absolute;
width: 90px;
height: 90px;
background-color: orange;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
text-align: center;
line-height: 90px;
font-size: 30px;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.circle::after{
content: '';
position: absolute;
top: -78px;
left: 50px;
transform: translate(-50%);
border: 40px solid orange;
border-left-width: 10px;
border-right-width: 10px;
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
<div class="outher">
<div class="wapper">
<div class="left">
<div class="one">
<span class="text">1号大奖</span>
</div>
<div class="two">
<span class="text">2号大奖</span>
</div>
<div class="three">
<span class="text">3号大奖</span>
</div>
<div class="four">
<span class="text">4号大奖</span>
</div>
</div>
<div class="right">
<div class="one">
<span class="text">5号大奖</span>
</div>
<div class="two">
<span class="text">6号大奖</span>
</div>
<div class="three">
<span class="text">7号大奖</span>
</div>
<div class="four">
<span class="text">未中奖</span>
</div>
</div>
</div>
<div class="circle">
抽奖
</div>
</div>
<!-- 这里是js部分 -->
<script>
let wapper = document.querySelector(".wapper");
let textAll=document.querySelectorAll(".text");
let texts=["x1号大奖","x2号大奖","x3号大奖","x4号大奖","x5号大奖","x6号大奖","x7号大奖","未中奖"];
// 是否抽奖中
let isFlag=true;
// 中奖概率比重设置,最后一个数值越大,中奖概率越小
let weight = [1,5,10,15,22,30,40,200];
// 循环得到奖项容器,给里面赋值奖项内容
for(let i=0;i<textAll.length;i++){
textAll[i].innerHTML=texts[i];
}
// 点击抽奖指针
document.querySelector(".circle").onclick=function(){
if(isFlag){
// 生成0~200的随机数,随机抽奖;生成的随机数越大,中奖概率越小
let random=parseInt(Math.random()*(weight[weight.length-1]));
// 将生成的随机数合并到数组中，生成新的数组randomWeight
let randomWeight=weight.concat(random);
console.log("randomWeight",randomWeight);
// 将数组从小到大排序。此时生成的随机数将被排序到前面
let aa=randomWeight.sort(function(a,b){return a - b});
// 在新数组里面查找生成的随机数下标
let randomIndex = aa.indexOf(random);
switch(randomIndex){
case 0:
run(22.5,texts[randomIndex]);
break;
case 1:
run(66.5,texts[randomIndex]);
break;
case 2:
run(112.5,texts[randomIndex]);
break;
case 3:
run(157.5,texts[randomIndex]);
break;
case 4:
run(338.5,texts[randomIndex]);
break;
case 5:
run(294.5,texts[randomIndex]);
break;
case 6:
run(247.5,texts[randomIndex]);
break;
case 7:
run(201.5,texts[randomIndex]);
break;
}
}
}
let timer=null;
function run(angle,text){
isFlag=false;
let begin=0;
let basic=1800;
timer=setInterval(function(){
// 转盘转动的圈数
begin+=Math.ceil((basic+angle-begin)*0.1);
if(begin>(basic+angle)){
isFlag=true;
clearInterval(timer);
}
// console.log(begin,angle,text);
// 设置转盘旋转圈数
wapper.style.transform="rotate("+begin+"deg)";
// 生成旋转圈数,可以让转盘缓慢停止;
},50);
}
</script>
</body>
</html>
版权声明：本文为TS_144636原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。