超级大转盘！(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。

相关文章

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
公共筛选组件（二次封装antd）支持代码提示

公共筛选组件（二次封装antd）支持代码提示

如果项目是基于antd组件库为基础搭建，可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
17.用300行代码手写初体验Spring V1.0版本

17.用300行代码手写初体验Spring V1.0版本

1.1.课程目标 1、了解看源码最有效的方式，先猜测后验证，不要一开始就去调试代码。 2、浓缩就是精华，用 300行最简洁的代码 提炼Spring的基本设计思想。 3、掌握Spring框架的基本脉络。 1.2.内容定位 1、 具有1年以上的SpringMVC使用经验。 2、 希望深入了解Spring源码的人群，对 Spring有一个整体的宏观感受。 3、 全程手写实现SpringM
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
代码随想录算法训练营：12/60

代码随想录算法训练营：12/60

非科班学习算法day12 | LeetCode150:逆波兰表达式 ，Leetcode239: 滑动窗口最大值  目录 介绍 一、基础概念补充： 1.c++字符串转为数字 1. std::stoi, std::stol, std::stoll, std::stoul, std::stoull（最常用） 2. std::stringstream 3. std::atoi, std
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
记录AS混淆代码模板

记录AS混淆代码模板

开启混淆得先在build.gradle文件中把 minifyEnabled false改成true,以及shrinkResources true//去除无用的resource文件 这些是写在proguard-rules.pro文件内的 指定代码的压缩级别 -optimizationpasses 5 包明不混合大小写 -dontusemixedcaseclassnames 不去忽略非公共
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2