JS 转盘抽奖效果

最新推荐文章于 2024-04-15 08:19:16 发布

白墨阳

最新推荐文章于 2024-04-15 08:19:16 发布

阅读量245

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/TS_144636/article/details/119274508

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

阅读原文,微信扫描二维码，手机关注公共号酒酒酒酒，搜索 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>

白墨阳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS 转盘抽奖效果

阅读原文,微信扫描二维码，手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果JS 转盘抽奖效果前置条件：开发环境：windows开发框架：vue，elelemtUI，js编辑器：HbuilderX正文开始：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="description" content=""> &lt
复制链接

扫一扫