超级大转盘！(html+less+js)（结尾附代码）

2024-05-08 19:20
文章标签 代码 js html 超级 frontend 大转盘 结尾 less

本文主要是介绍超级大转盘！(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)（结尾附代码）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/971214。

相关文章

Java中调用数据库存储过程的示例代码

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示
阅读更多...
Visual Studio 2022 编译C++20代码的图文步骤

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性：
阅读更多...
MySQL数据库的内嵌函数和联合查询实例代码

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面：本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN
阅读更多...
Java实现自定义table宽高的示例代码

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格（JTable）作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...
Go语言代码格式化的技巧分享

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具：gofmt 与 go fmt（一）
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2