JS 转盘抽奖效果

曾经终败给现在 2022-08-29 05:47 232阅读 0赞

阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果

![微信扫描二维码，阅读原文][96bb8c4efd754d40a80f14c6a5b7c058.png]

## 效果图 ##

![在这里插入图片描述][7b149585de484d358a60de2537133ee6.gif_pic_center]

### JS 转盘抽奖效果 ###

前置条件：

开发环境：windows

开发框架：js

编辑器：HbuilderX

## 正文开始： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="author" content="熊仔其人">
        <title>转盘抽奖效果</title>
        
        <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>
        
        <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>
        
        <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>

[96bb8c4efd754d40a80f14c6a5b7c058.png]: /images/20220829/f7e8ca8493dc45d7bf1a34b89b3c8025.png
[7b149585de484d358a60de2537133ee6.gif_pic_center]: /images/20220829/e5d2bf00e696459680fd5030dbe4815c.png