html+css+js实现带有转盘的抽奖小程序
简介：html+css+js实现带有转盘的抽奖小程序。
效果展示
抽奖方式：
飞镖
飞镖制作成飞机的模样，没人的号码用黄色标签做成云朵模样黏贴在背景板上，年会背景板缓缓移动，飞扎中的名字得奖寓意飞黄腾达。
福利彩票机
年会入场嘉宾人手一张自制。
可以哒云抽奖
创建抽奖活动后，扫描活动二维码，推广二维码，最后在拿出手机抽奖。
转盘抽奖
数字，转动三次构成一组百位数，号码对应者获奖。随着号码的逐一产生，现场配合音响效果能创造出激动人心的效果。
摘红包
把个人的电话号码写于纸上放在红包里，年会上领导随机摘取一个，然后打电话给获奖人。悬念十足，气氛紧张。
捞金
由年会上领导在箱子里放入一定数额的大额人民币，其余人用一元的纸币写上自己的名字或号码，放多少个人而定，放越多机会越多。（主持强调，付出越多收获越大）领导抽出中奖人再从准备好的三个信封抽出一个，三个信封内为：一只手，两只指，一双筷子等，然后自行捞取现金。最后被抽中的人所有奖金都归他。
藏宝图
具有设计感的小纸粘在杯碟椅子等地方上，在开party前，一张藏宝图分2份对开的，上边写着礼品号码，礼分2份的就是个号码有2分的，其中一分是真的，一分是假的，当他们找好藏宝图后必然要找另一半藏宝图才可以对奖的，在找藏宝图时就可以互动作用了，不过号码里的礼品一定要放点好玩的东西的（奶瓶，尿不湿）也放点大奖的啦，当同一张小纸合起来，就可以上换奖了，也可以拿了藏宝图的一对人交换藏宝图的，那时就会出很多笑话了。例如有人的藏宝图只找到半张纸时，他可能会看领导的杯杯碟碟的。强调团队合作的重要性。
本文采取的是转盘抽奖：
实现代码
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="./style.css" type="text/css" rel="stylesheet"></head><style></style><body><!-- 首先通过分析观察可以知道这是一个双层次结构，所以需要的是div嵌套结构 --><div class="outher"><div class="wapper"><div class="left"><!-- 一边4个选项 --><div class="one"> <span class="text"></span></div><div class="two"> <span class="text"></span></div><div class="three"> <span class="text"></span></div><div class="four"> <span class="text"></span></div></div><div class="right"><div class="one"> <span class="text"></span></div><div class="two"> <span class="text"></span></div><div class="three"> <span class="text"></span></div><div class="four"> <span class="text"></span></div></div></div><!-- 图形中间的文字 --><div class="circle">抽奖</div></div><script src="style.js"></script></body></html>
style.css
*{margin:0;padding:0;}body{/* 让div盒子放到屏幕中间 */display: flex;justify-content: center;align-items: center;height: 100vh;}.outher{width:300px;height: 300px;position: relative;border-radius: 50%;}.wapper{width:300px;height: 300px;border-radius: 50%;overflow: hidden;background-color: black;transform:rotate(22.5deg);}.left{position: absolute;width: 150px;height: 300px;left:0;overflow: hidden;}.left .text{position: absolute;top:30px;left:55%;transform:rotate(-22.5deg);text-align: center;}.right .text{position: absolute;top:25px;left:11%;transform:rotate(22.5deg);text-align: center;}.right{position: absolute;width: 150px;height: 300px;right:0;overflow: hidden;text-align: center;}.left div{position: absolute;top:0;left:0;width: 100%;height: 100%;transform-origin: right center;}.left div.one{background-color: #FC7C7B;}.left div.two{background-color: #F59462;transform:rotate(-45deg);}.left div.three{background-color: #FC7C7B;transform:rotate(-90deg);}.left div.four{background-color: #F59462;transform:rotate(-135deg);} .right div{position: absolute;top:0;left:0;width: 100%;height: 100%;transform-origin: left center;}.right div.one{background-color: #FC7C7B;}.right div.two{background-color: #F59462;;transform:rotate(45deg);}.right div.three{background-color: #FC7C7B;;transform:rotate(90deg);}.right div.four{background-color: #fff;transform:rotate(135deg);} .circle{width: 100px;height: 100px;background-color:#f2552e ;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius: 50%;text-align: center;line-height: 100px;font-size: 30px;font-weight: bold;cursor: pointer;user-select: none;}.circle:after{width: 0;height: 0;border:40px solid #f2552e ;;border-left-width: 10px;border-right-width: 10px;position: absolute;content:"";border-left-color: transparent;border-top-color: transparent;border-right-color: transparent;top:-70px;left:calc(50% - 10px);z-index: -1;}
style.js
let wapper = document.querySelector(".wapper");let textAll = document.querySelectorAll(".wapper .text");// 这里是奖项的名字let prize = ["1号大奖","2号大奖","3号大奖","4号大奖","5号大奖","6号大奖","7号大奖","未中奖"];// 权重数组 不同奖项的权重值，权重越高越容易中这个区域let prizeWeight = [1,3,5,7,10,15,20,30];// 权重之和let weightSum = prizeWeight.reduce(function(prevValue,curVal){return prevValue + curVal;});for(let i = 0 ; i < textAll.length ; i++){textAll[i].innerHTML = prize[i]; }let isFlag = true;document.querySelector(".circle").onclick=function(){console.log(123);if(isFlag){// 生成权重随机数 生成数的范围是【1,30】// 这里需要注意的是，这个30要和最上面的prizeWeight的最后一个值对应let weightRandom = parseInt(Math.random()*30);// 合并let concatAfterArr = prizeWeight.concat(weightRandom);// 排序let sortedWeightArr = concatAfterArr.sort(function(a,b){return a-b });// randomIndex是奖项的索引 结果是【1,7】var randomIndex = sortedWeightArr.indexOf(weightRandom); randomIndex = Math.min(randomIndex, prize.length -1); // 获奖的内容let text = prize[randomIndex];switch(randomIndex){case 0:run(22.5,text);break;case 1:run(66.5,text);break;case 2:run(112.5,text); break;case 3:run(157.5,text);break;case 4:run(338.5,text);break;case 5:run(294.5,text);break; case 6:run(247.5,text);break;case 7:run(201.5,text);break; }}};function run(angle,text){isFlag = false;let begin = 0; let timer = null;let basic = 1800;timer = setInterval(function(){if(begin > (basic+angle)){isFlag = true;clearInterval(timer);}wapper.style.transform="rotate("+(begin)+"deg)";// 这是一个算法 可以出现转盘又很快到慢慢变慢的效果begin+=Math.ceil(basic+angle-begin)*0.1;},70);}
