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

于 2024-05-08 15:40:33 发布
阅读量644 收藏 31
点赞数 24
分类专栏： html+css JavaScript 文章标签： 前端 html js less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/138573411
版权

超级大转盘！（结尾附代码）

网上看到有人用转盘抽奖，怀疑是不是有问题，为什么每次都中不了，能不能整个转盘自己想中啥中啥，查阅了网上写得好的文章，果然实现了只中谢谢参与！！
先上效果：
请添加图片描述

不是哥们，这还能只中谢谢参与？(其实故意干的)
请添加图片描述

这段代码用html+less+js和简单的jq判断实现

HTML部分

<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>

旋转动画的话其实就是.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 * 平均值 + 平均值 / 2
    const 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);
  //把奖品赋值到.luckWhellBgMain
  let 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; //中奖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];
        prizeAddHtml(prizeList);
        //每个奖增加style
        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 * 平均值 + 平均值 / 2
                const 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)
            //把奖品赋值到.luckWhellBgMain
            let 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 = i
                    console.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控制中什么（我中不了奖就是有黑幕！）
在这里插入图片描述

Southern Wind
关注
  • 24
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
带跑马灯效果的大转盘抽奖 前端js 代码
04-12
带跑马灯效果的大转盘抽奖 前端js 代码；带跑马灯效果的大转盘抽奖 前端js 代码；
html+css+js实现带有转盘的抽奖小程序
jakelihua
01-20 5313
html+css+js实现带有转盘的抽奖小程序。
html5转盘抽奖代码.zip
07-03
html5转盘抽奖代码基于html5 canvas技术实现，点击开始旋转按钮，转盘就会快速旋转，停止旋转后，所在区域就是中奖项目。奖项可以自定义。
html幸运大转盘抽奖（附源码）
xcLeigh
11-24 4582
html幸运大转盘抽奖（附源码），好看的，漂亮的，酷炫的幸运大转盘抽奖，动态的抽奖效果，转盘的图片文件包含psd源文件，可以直接改各种自己喜欢的风格，里面内涵几种漂亮的转盘，在次代码基础上，可以加入自己的元素，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
html+css+js实现转盘抽奖
m0_72851228的博客
02-19 3515
html+css+js实现转盘抽奖
HTML5 简单的转盘抽奖js特效代码
ICode联盟
12-04 3156
下载地址 var info=["一等奖","二等奖","三等奖","四等奖","五等奖","六等奖","七等奖","八等奖","九等奖","十等奖"];var color=[];var step = 2*Math.PI/10;var outerR = 150; //轮盘的大小var interR = 50;//内存空白圆的大小var beginAngle=50;//旋转起来时默认开始旋转的度数，度数愈大旋转的初始速度愈大var radio = 0.95;//旋转速度衰减系数，影响旋转时间var t = n
HTML实现转盘抽奖的简单通用模板
z2141830440的博客
11-29 2291
基本需求分析有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品，每次打开网页时，这个物品的位置应该是随机的当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品。
html5 移动界面 lex + rem + + flexible.js + LESS
03-20
综上所述，"html5 移动界面 lex + rem + flexible.js + LESS" 的组合，通过HTML5的先进特性、Flexbox的灵活布局、rem的响应式单位、flexible.js的适配处理以及LESS的代码组织，共同构建出适应各种设备、屏幕尺寸和...
HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图
03-25
常见的JavaScript库，如D3.js、ECharts、Highcharts或Mapbox GL JS，提供了丰富的功能，如地图渲染、数据绑定、图表绘制和事件监听。通过JavaScript，我们可以实现以下功能： 1. 数据加载：从服务器或本地文件中...
html+less(css)+javascript实现网页练习.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
WEB前端初中级：HTML + CSS + LESS + JS
03-19
这个资源包，"WEB前端初中级：HTML + CSS + LESS + JS"，旨在帮助初学者或希望复习基础的开发者掌握核心的前端技术。下面我们将深入探讨这些技术及其重要性。 首先，HTML（HyperText Markup Language）是网页内容的...
2022最新仿小米商城首页html+css+js
09-22
在仿小米商城首页的HTML代码中，我们可能看到如导航栏、轮播图（banner）、产品展示区域等常见电商页面元素的结构定义。这些元素通过不同的HTML标签进行区分，如`<header>`、`<nav>`、`<section>`、`<article>`、`...
用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
weixin_33675283的博客
06-10 6195
原标题：【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)效果 基本是用CSS实现的，没有用图片，加一丢丢JS。 完全没有考虑兼容性。首先画一个转盘< htmllang= "en">< head>< metacharset= "UTF-8">< title>幸运大转盘 title>< style>/* 重置默认样式 */* ...
【九宫格抽奖源代码】
xiongIT的博客
03-23 2481
js实现九宫格抽奖源代码
抽奖转盘HTML5
热门推荐
安迪夫的博客
05-06 1万+
html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE...
【案例篇5】HTML+CSS+JS实现九宫格转盘抽奖（源码）
风中追风
02-17 2711
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的九宫格转盘抽奖，赶紧学起来吧，直接拿到直接自己系统中抽奖使用，简单又实用。
HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️
java李阳勇的博客
09-06 1043
效果演示： 代码目录： 主要代码实现： 部分CSS样式： .winnerBox { max-width: 40rem; padding: 30px; margin: 30px auto; /*height: calc(100vh - 98px);*/ /*background-color: #fd6504 #9470fd;*/ background: linear-gradient(to bottom right, #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值