超级大转盘!(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控制中什么(我中不了奖就是有黑幕!)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA栈相关习题3

1.将递归转化为循环 比如&#xff1a;逆序打印链表 // 递归方式void printList(Node head){if(null ! head){printList(head.next);System.out.print(head.val " ");}} // 循环方式void printList(Node head){if(nullhead){return;}Stack<Node> snew Stack<…

4.5_shell的执行流控制

##1.for语句## &#xff08;1&#xff09;for语句作用 为循环执行动作 &#xff08;2&#xff09;for语句结构 for 定义变量 do 使用变量&#xff0c;执行动作 done 结束标志 &#xff08;3&#xff09;for语句的基本格式 格式1 格式1&#xff1a;#!/b…

【工程师的自我修养】前言

一、为什么大家不帮我&#xff1f; 九年义务教育4年大学&#xff0c;学生早已习惯了有个老师带着&#xff0c;在学校里敢于问问题的同学是好学的、上进的。但在社会中问问题往往是受到冷落的、需要低声下气的。从天堂到地狱的强烈落差&#xff0c;是最让毕业生无所适从的。为什…

OpenHarmony实战开发——引入开源C/C++库之Har包里的NDK

Har 包 HAR&#xff08;Harmony Archive&#xff09;是静态共享包&#xff0c;可以包含代码、C 库、资源和配置文件。通过 HAR 可以实现多个模块或多个工程共享 ArkUI 组件、资源等相关代码。HAR 不同于 HAP&#xff0c;不能独立安装运行在设备上&#xff0c;只能作为应用模块…

如何查看自己的电脑是否有(支持)无线网卡驱动

要查看自己的电脑是否支持无线网卡驱动,可以按照以下步骤进行检查: 打开"设备管理器" - 在Windows 10/11中,可以在搜索栏输入"设备管理器"打开它 - 在旧版Windows系统中,可以通过"控制面板"->"“系统和安全”->""系统&quo…

python连接SQL Server数据库的几点建议

1、用常规的做法可能不行&#xff0c;如 用 pymssql&#xff0c;各种折腾&#xff0c;连不上很正常&#xff0c;常用的帖子见这个&#xff1a; pymssql连接sql server一直报错解决方法&#xff08;pymssql._pymssql.OperationalError: (20009, b‘DB-Lib error message 20009…

ansible 深入介绍之 主机清单与playbook

目录​​​​​​​ 一 inventory 主机清单 1&#xff0c;主机清单 是什么 2&#xff0c;主机清单 定义方式 2.1 自定义主机端口 2.2 定义 范围ip 地址 2.3 定义 拥有相似的主机名 3&#xff0c; inventory 中的变量 3.1 常见 变量 3.2 主机变量 3.3 组变量 3.…

c语言练习5.8

1.分析代码 VS开发环境调试下面的代码&#xff0c;画图解释下面代码的问题 #include <stdio.h> int main() {int i 0;int arr[] {1,2,3,4,5,6,7,8,9,10};for(i0; i<12; i){arr[i] 0;printf("hello bit\n");}return 0; } 分析: 2.喝汽水问题 喝汽水&a…

嘉楠堪智 CanMV K230 进行 Linux、RT-smart 系统开发

本文记录学习、使用 K230 SDK 进行 Linux、RT-smart 系统的开发的一些关键步骤&#xff0c;如何获取系统源代码&#xff0c;如何配置环境&#xff0c;如何使用 Docker 进行编译&#xff0c;获得系统文件。 具体详细的教程&#xff0c;可以学习 CanMV K230 教程。 目录 一、S…

区间合并,CF 1102E Monotonic Renumeration

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1102E - Codeforces 二、解题报告 1、思路分析 我们不难发现对…

如何测试计算机的内存是否存在问题?这里提供两种方法

如果你的电脑是崩溃、冻结还是不稳定,那么它的内存可能有问题。要进行检查,你可以使用Windows 11、10和7附带的隐藏系统工具,或者下载并启动更高级的工具。 内存测试工具的工作原理 计算机的随机存取存储器(内存)是其工作存储器。你的计算机的操作系统和应用程序不断地将…

2024.5.6 —— LeetCode 高频题复盘

目录 283. 移动零153. 寻找旋转排序数组中的最小值468. 验证IP地址224. 基本计算器739. 每日温度138. 随机链表的复制47. 全排列 II207. 课程表LCR 125. 图书整理 II 283. 移动零 题目链接 Python class Solution:def moveZeroes(self, nums: List[int]) -> None:"&q…

.net 6.0 框架集成ef实战,步骤详解

一、代码框架搭建 搭建如下代码架构: 重点含EntityFrameworkCore工程,该工程中包含AppDbContext.cs和数据表实体AggregateObject 1、AppDbContext 代码案例 //AppDbContext 代码案例using Microsoft.EntityFrameworkCore;namespace EntityFrameworkCore {public class Ap…

思通数科大模型在智能数据查询系统中的深度应用:销售数据分析的革新

在企业决策支持系统中&#xff0c;销售数据分析占据着举足轻重的地位。思通数科的大模型技术&#xff0c;结合自然语言处理&#xff08;NLP&#xff09;和机器学习&#xff0c;为智能数据查询系统提供了强大的分析能力。本文将详细描述思通数科大模型在销售数据分析中的应用&am…

2024 GESP6级 编程第一题 游戏

题目描述 你有四个正整数 &#xff0c;并准备用它们玩一个简单的小游戏。 在一轮游戏操作中&#xff0c;你可以选择将 减去 &#xff0c;或是将 减去 。游戏将会进行多轮操作&#xff0c;直到当 时游戏结束。 你想知道游戏结束时有多少种不同的游戏操作序列。两种游戏操作…

C++ Primer 中文版(第 5 版)- 第一单元练习

第一单元 练习 1.1 编写程序&#xff0c;在标准输出上打印Hello, World。 #include <iostream>int main(int argc, const char * argv[]) {std::cout << "Hello, ceshi!\n";return 0; }练习 1.2 我们编写程序使用乘法运算符*&#xff0c;来打印两个数…

科沃斯,「扫地茅」荣光恐难再现

作者 | 辰纹 来源 | 洞见新研社 科沃斯恐怕已经很难再回到被市场誉为“扫地茅”时的荣光了。 不久前&#xff0c;科沃斯发布2023年财报&#xff0c;报告期内营业收入155亿&#xff0c;同比仅增长1.16%&#xff0c;归母净利润6.12亿元&#xff0c;同比下降63.96%&#xff0c;直…

20240508请问GTX2080TI的300和300A核心的差异?

20240508请问GTX2080TI的300和300A核心的差异&#xff1f; 在拼多多/淘宝上&#xff0c;GTX2080TI的300A核心的会比300核心的贵100&#xffe5;左右。 但是怎么区分呢&#xff1f; 300a核心和300请问怎么区分呢&#xff1f;[嘻嘻] devicr ID diviceid 1e07是300a 1e04是300 Gp…

【文章转载】ChatGPT 提示词十级技巧: 从新手到专家

学习了微博网友宝玉xp老师《ChatGPT 提示词十级技巧: 从新手到专家》 个人学习要点&#xff1a; 1、关于提示中避免使用否定句&#xff0c;播主说&#xff1a;“没有人能准确解释为什么&#xff0c;但大语言模型在你告诉它去做某事时&#xff0c;表现似乎比你让它不做某事时更…

Java进阶05 时间API异常

Java进阶05 一、递归算法 方法直接&#xff08;自己调自己&#xff09;或间接&#xff08;方法调其他方法&#xff0c;其他方法又回调自己&#xff09;调用自身 1、递归思想 把一个复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。需要注意&#xff0c;设计递…