本文主要是介绍超级大转盘！(html+less+js)（结尾附代码），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
超级大转盘！（结尾附代码）
网上看到有人用转盘抽奖，怀疑是不是有问题，为什么每次都中不了，能不能整个转盘自己想中啥中啥，查阅了网上写得好的文章，果然实现了只中谢谢参与！！
先上效果：
不是哥们，这还能只中谢谢参与？(其实故意干的)
这段代码用html+less+js和简单的jq判断实现
HTML部分
<sectionclass="section"style="background-color: #1C003B;height: calc(100vh - 2.24rem);"
><div class="kuohu"></div><div class="luckBg"><div class="luckWhellBg"><div class="luckWhellBgMain rotateStyle"></div><div class="wheel-main"><div class="prize-list rotateStyle"></div><div class="prize_point" onclick="prizeRoll()"></div></div></div></div><p class="jihui">您今天还有<span>1</span>次抽奖机会!</p>
</section>
旋转动画的话其实就是.rotateStyle中的 transform 属性，改变转盘旋转的速度以及动画结束时间
CSS
/* 大转盘 */
.luckBg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/* background: #180036; */background-image: url(../images/borderrd.png);width: 6.5rem;height: 6.5rem;background-size: contain;/* border-radius: 50%; */margin: 0 auto;padding: 0.5rem;box-sizing: border-box;.luckWhellBg,.luckWhellBgMain {background: pink;width: 100%;height: 100%;border-radius: 50%;position: relative;overflow: hidden;.rotateStyle {-webkit-transition: transform 5000ms ease-in-out;transition: transform 5000ms ease-in-out;}}
}
.kuohu {width: 100%;height: 5.34rem;background-image: url(../images/kuohu.png);background-size: contain;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.luckWhellSector {position: absolute;top: 0;right: 0;transform-origin: 0% 100%;border: 1px solid #facd89;border-right: 0;border-top: 0;box-sizing: border-box;
}.luckWhellSector {&:nth-child(1) {position: absolute;background: #fff68b;}&:nth-child(4) {position: absolute;background: #fff68b;}&:nth-child(2) {position: absolute;background: #ffbc2c;}&:nth-child(5) {position: absolute;background: #ffbc2c;}&:nth-child(3) {position: absolute;background: #ffd428;}&:nth-child(6) {position: absolute;background: #ffd428;}
}/* .luckWhellSector:nth-child(2n+1) {position: absolute;background: #72FCF9;
} */.wheel-main {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 2;
}.prize-list {width: 100%;height: 100%;position: relative;
}.prize-item {position: absolute;left: 50%;height: 50%;padding-top: 15px;box-sizing: border-box;text-align: center;transform-origin: 50% 100%;color: #f83c0e;
}.prize_point {position: absolute;left: 50%;// background: #ff3a60;width: 1.81rem;background-image: url(../images/btn.png);background-size: contain;height: 2.2rem;top: 50%;margin-left: -0.9rem;margin-top: -1rem;border-radius: 50%;
}.prize_point::after {/* position: absolute;left: 50%;top: -28px;width: 0;height: 0;margin-left: -16px;border: 16px solid;border-color: transparent transparent #ff3a60;content: ''; */
}
JS 部分
因为数据肯定是活的，所以我们这里要把数据单独拎出来
let formData = [{//可以随意更改奖项个数id: 1,img: "./images/33.png",prize_name: "谢谢参与",},{id: 2,img: "./images/22.png",prize_name: "打工一天",},{id: 3,img: "./images/11.png",prize_name: "狂炫一天",},{id: 4,img: "./images/33.png",prize_name: "谢谢参与",},{id: 5,img: "./images/22.png",prize_name: "打工一天",},{id: 6,img: "./images/11.png",prize_name: "狂炫一天",},
];
圈里的图片可以自己查找替换
const CIRCLE_ANGLE = 360; // 转盘的总旋转角度
const BIGSIZE = 24; //
let angleList = []; // 记录每个奖的位置
let gift_id = 1; //中奖ID
let prizeList = formatPrizeList(formData); //有样式的奖品列表
let index = ""; //抽中的是第几个奖品
let isRotating = false; //为了防止重复点击
let rotateAngle = 0;
let bgDom = document.getElementsByClassName("luckWhellBgMain")[0];
let divDom = document.getElementsByClassName("prize-list")[0];
定义变量
function formatPrizeList(list) {const l = list.length;// 计算单个奖项所占的角度const average = CIRCLE_ANGLE / l;const half = average / 2;const rightBig = l == 2 ? "50" : "0";const heightBig = l <= 3 ? "100" : "50";const topBig = l == 3 ? "-50" : "0";const skewMain = l <= 2 ? 0 : (-(l - 4) * 90) / l;// 循环计算给每个奖项添加style属性list.forEach((item, i) => {// 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2const angle = -(i * average + half);const bigAge = l > 2 ? (i * 360) / l : "0";// 增加 style 这个是给每一个奖项增加的样式item.style = `-webkit-transform: rotate(${-angle}deg);transform: rotate(${-angle}deg);width:${(100 / l) * 2}%; margin-left: -${100 / l}%;font-size:${BIGSIZE - l}px;`;//这是给每一个转盘背景新增的样式item.style2 = `-webkit-transform: rotate(${bigAge}deg);transform: rotate(${bigAge}deg) skewY(${skewMain}deg);right:${rightBig * i}%;height:${heightBig}%;top:${topBig}%;width:${l == 1 ? 100 : 50}%;background:${item.color}`;// 记录每个奖项的角度范围angleList.push(angle);});return list;
}
把奖品放入这个函数中
prizeAddHtml(prizeList);
//奖品赋值到每个奖品中；
function prizeAddHtml(prizeList) {console.log(prizeList);//把奖品赋值到.luckWhellBgMainlet htmlBg = "";let htmlDiv = "";for (let i = 0, len = prizeList.length; i < len; i++) {htmlBg += `<div class="luckWhellSector" style="${prizeList[i].style2}"></div>`;htmlDiv += `<div class="prize-item" style="${prizeList[i].style}"> <div style="letter-spacing:0.05rem">${prizeList[i].prize_name} </div> <div style="padding-top:5px;"><img src=" ${prizeList[i].img}" style="width:45%"/></div> </div>`;}bgDom.innerHTML = htmlBg;divDom.innerHTML = htmlDiv;
}
抽奖部分
//抽奖
let prize = "";
function prizeRoll() {if ($(".jihui span").text() == 0) {return alert("你的机会已经用完了！无法继续抽奖，若获奖，请到活动页面领取");}if (isRotating) return false;prizeList.forEach((item, i) => {if (item.id == gift_id) {index = i;console.log(item.prize_name);prize = item.prize_name;} //判断中奖的位置});
}
转盘转动角度
//转盘转动角度
function rotating() {isRotating = true;const config = {duration: 5000,circle: 8,mode: "ease-in-out",};// 计算角度const angle =// 初始角度rotateAngle +// 多旋转的圈数config.circle * CIRCLE_ANGLE +// 奖项的角度angleList[index] -(rotateAngle % CIRCLE_ANGLE);rotateAngle = angle;bgDom.style.transform = `rotate(${rotateAngle}deg)`;divDom.style.transform = `rotate(${rotateAngle}deg)`;// 旋转结束后，允许再次触发setTimeout(() => {isRotating = false;console.log("旋转结束");$(".jihui span").text(0);alert(prize);}, config.duration + 500);
}
完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>抽奖</title><link rel="stylesheet/less" href="./css/style.less"><link rel="stylesheet" href="./css/base.css">
</head><body><header class="header"><div class="banner" style="background-image: url(./images/banner.jpg);"></div></header><section class="section" style="background-color: #1C003B;height: calc(100vh - 2.24rem);"><div class="kuohu"> </div><div class="luckBg"><div class="luckWhellBg"><div class="luckWhellBgMain rotateStyle"></div><div class="wheel-main"><div class="prize-list rotateStyle"></div><div class="prize_point" onclick="prizeRoll()"></div></div></div></div><p class="jihui">您今天还有<span>1</span>次抽奖机会!</p></section><script>const CIRCLE_ANGLE = 360;const BIGSIZE = 24;let formData = [{ //可以随意更改奖项个数id: 1,img: './images/33.png',prize_name: "谢谢参与"}, {id: 2,img: './images/22.png',prize_name: "打工一天"}, {id: 3,img: './images/11.png',prize_name: "狂炫一天"}, {id: 4,img: './images/33.png',prize_name: "谢谢参与"}, {id: 5,img: './images/22.png',prize_name: "打工一天"}, {id: 6,img: './images/11.png',prize_name: "狂炫一天"},];let angleList = []; // 记录每个奖的位置let gift_id = 1; //中奖IDlet prizeList = formatPrizeList(formData); //有样式的奖品列表let index = '';//抽中的是第几个奖品let isRotating = false; //为了防止重复点击let rotateAngle = 0;let bgDom = document.getElementsByClassName('luckWhellBgMain')[0];let divDom = document.getElementsByClassName('prize-list')[0];prizeAddHtml(prizeList);//每个奖增加stylefunction formatPrizeList(list) {const l = list.length;// 计算单个奖项所占的角度const average = CIRCLE_ANGLE / l;const half = average / 2;const rightBig = l == 2 ? '50' : '0';const heightBig = l <= 3 ? '100' : '50';const topBig = l == 3 ? '-50' : '0';const skewMain = l <= 2 ? 0 : -(l - 4) * 90 / l;// 循环计算给每个奖项添加style属性list.forEach((item, i) => {// 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2const angle = -(i * average + half);const bigAge = l > 2 ? i * 360 / l : '0';// 增加 style 这个是给每一个奖项增加的样式item.style = `-webkit-transform: rotate(${-angle}deg);transform: rotate(${-angle}deg);width:${100 / l * 2}%; margin-left: -${100 / l}%;font-size:${BIGSIZE - l}px;`;//这是给每一个转盘背景新增的样式item.style2 = `-webkit-transform: rotate(${bigAge}deg);transform: rotate(${bigAge}deg) skewY(${skewMain}deg);right:${rightBig * i}%;height:${heightBig}%;top:${topBig}%;width:${l == 1 ? 100 : 50}%;background:${item.color}`// 记录每个奖项的角度范围angleList.push(angle);});return list;};//奖品赋值到每个奖品中；function prizeAddHtml(prizeList) {console.log(prizeList)//把奖品赋值到.luckWhellBgMainlet htmlBg = '';let htmlDiv = '';for (let i = 0, len = prizeList.length; i < len; i++) {htmlBg += `<div class="luckWhellSector" style="${prizeList[i].style2}"></div>`;htmlDiv += `<div class="prize-item" style="${prizeList[i].style}"> <div style="letter-spacing:0.05rem">${prizeList[i].prize_name} </div> <div style="padding-top:5px;"><img src=" ${prizeList[i].img}" style="width:45%"/></div> </div>`}bgDom.innerHTML = htmlBg;divDom.innerHTML = htmlDiv;};//抽奖let prize = ''function prizeRoll() {if ($('.jihui span').text() == 0) {return alert('你的机会已经用完了！无法继续抽奖，若获奖，请到活动页面领取')}if (isRotating) return false;/* gift_id = Math.floor(1 + Math.random() * prizeList.length);console.log(gift_id); */prizeList.forEach((item, i) => {if (item.id == gift_id) {index = iconsole.log(item.prize_name);prize = item.prize_name}; //判断中奖的位置});rotating();};//转盘转动角度function rotating() {isRotating = true;// const {rotateAngle,angleList,config,index} = {0,angleList,{duration:5000, circle: 8,mode: "ease-in-out"},index};const config = {duration: 5000,circle: 8,mode: "ease-in-out"}// 计算角度const angle =// 初始角度rotateAngle +// 多旋转的圈数config.circle * CIRCLE_ANGLE +// 奖项的角度angleList[index] -(rotateAngle % CIRCLE_ANGLE);rotateAngle = angle;bgDom.style.transform = `rotate(${rotateAngle}deg)`divDom.style.transform = `rotate(${rotateAngle}deg)`// 旋转结束后，允许再次触发setTimeout(() => {isRotating = false;console.log('旋转结束')$('.jihui span').text(0)alert(prize)}, config.duration + 500);} </script><script src="./js/less.js"></script><script src="./js/jquery.3.6.3.min.js"></script><script src="./js/rem7.5.js"></script>
</body>
</html>结尾
当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）
这篇关于超级大转盘！(html+less+js)（结尾附代码）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
