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); }
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历，让大家更好学习编程，我的抖音，B站也叫极客李华。
