js实现抽奖大转盘自定义抽奖转盘

MeverikC

已于 2024-06-17 10:21:09 修改

阅读量1k

点赞数 7

分类专栏： case 文章标签： javascript 开发语言 html5 css3 前端

于 2024-05-16 11:44:55 首次发布

本文链接：https://blog.csdn.net/m0_61796289/article/details/138953163

版权

case 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js实现抽奖大转盘自定义抽奖转盘

废话不多说,先看效果图
转盘成果图

演示地址

点这里

直接上源码

turntable.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>选择困难</title>
    <script src = "https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.25"></script>
    <link rel="icon" href="images/check.ico"><!-- icon-->
    <link rel="stylesheet" type="text/css" href="css/index.css"><!-- 引用css-->
</head>
<body>
    <div class="configuration-from">
        <!-- 选项表单-->
        <form id="custom-form">
            <h1>
                配置抽奖项
            </h1>
            <label for="prize-text1">选项一：</label>
            <br>
            <input type="text" id="prize-text1" placeholder="请输入奖品文本">
            <br>
            <label for="prize-text2">选项二：</label>
            <br>
            <input type="text" id="prize-text2" placeholder="请输入奖品文本">
            <br>
            <label for="prize-text3">选项三：</label>
            <br>
            <input type="text" id="prize-text3" placeholder="请输入奖品文本">
            <br>
            <label for="prize-text4">选项四：</label>
            <br>
            <input type="text" id="prize-text4" placeholder="请输入奖品文本">
            <br>
            <div >
                <button type="button" onclick="updatePrizes()">确定</button>
                <button type="button" onclick="resetForm()">重置</button>
            </div>
        </form>
    </div>
    <!-- 转盘-->
    <div id="my-lucky" style="position: absolute;top: 50%;left: 70%;transform: translate(-50%,-50%)">
    </div>
    <script src="js/index.js"><!-- 引用js-->
    </script>
</body>
</html>

index.css

        body {
            background-image: url('../images/backwallpaper2.jpg');//背景图
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .configuration-from {
            background: #D2E9FF;
            position: absolute;
            max-width: 500px;
            padding: 20px 20px 20px 20px;
            top: 50%;
            left: 30%;
            transform: translate(-50%,-50%);
            color: #666;
            font: 12px Arial, Helvetica, sans-serif;
        }
        .configuration-from h1 {
            font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
            padding: 10px 10px 10px 20px;
            display: block;
            background: #C0E1FF;
            border-bottom: 1px solid #B8DDFF;
            margin: -20px -20px 15px;
            font-weight: bold;
        }
        .configuration-from label {
            display: block;
            margin: 0 0 5px;
            font: 15px Arial, Helvetica, sans-serif;
            font-weight: bold;
        }
        .configuration-from input {
            color: #888;
            width: 400px;
            padding: 0 0 0 5px;
            border: 1px solid #C5E2FF;
            background: #FBFBFB;
            outline: 0;
            -webkit-box-shadow:inset 0 1px 6px #ECF3F5;
            box-shadow: inset 0 1px 6px #ECF3F5;
            font: 200 12px/25px Arial, Helvetica, sans-serif;
            height: 35px;
            line-height:15px;
            margin: 2px 6px 16px 0;
        }
        .configuration-from textarea {
            height:200px;
            padding: 5px 0 0 5px;
            width: 70%;
        }
        .configuration-from button {
            background: blueviolet;
            border: none;
            padding: 10px 25px 10px 25px;
            color: #FFF;
            box-shadow: 1px 1px 5px #B6B6B6;
            border-radius: 3px;
            text-shadow: 1px 1px 1px blueviolet;
            cursor: pointer;
        }

index.js

const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
    width: '500px',
    height: '500px',
    blocks: [{ padding: '10px', background: '#617df2' }],
    prizes: [
        //配置选项 text:转盘文案 range:中将概率
      { background: '#e9e8fe', range: 25, fonts:[{text:''}]},
      { background: '#b8c5f2', range: 25, fonts:[{text:''}]},
      { background: '#e9e8fe', range: 25, fonts:[{text:''}]},
      { background: '#b8c5f2', range: 25, fonts:[{text:''}]},
    ],
    buttons: [
      {
        radius: '20%',
        pointer:true,
        background: '#8a9bf3',
        fonts: [{text: '开始'}]
      }
    ],
    start: function () {
      // 开始游戏
      myLucky.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏
        myLucky.stop()
      }, 3000)
    }
  });
  //填充表单内容至转盘
  function updatePrizes() {
    const prizeText1 = document.getElementById("prize-text1").value;
    const prizeText2 = document.getElementById("prize-text2").value;
    const prizeText3 = document.getElementById("prize-text3").value;
    const prizeText4 = document.getElementById("prize-text4").value;

    myLucky.prizes[0].fonts[0].text = prizeText1;
    myLucky.prizes[1].fonts[0].text = prizeText2;
    myLucky.prizes[2].fonts[0].text = prizeText3;
    myLucky.prizes[3].fonts[0].text = prizeText4;
  }
  //清空表单及转盘
  function resetForm() {
        document.getElementById("custom-form").reset();
        myLucky.prizes.forEach(prize => {
            prize.fonts[0].text = '';
        });
  }

配置奖品prizes属性信息

prizes : Array<object> // 奖品列表
- range : number // 中间概率
- background : string // 扇形背景颜色
- fonts : Array<object> // 奖品文字
  - text : string // 文字内容
  - top : string | number // 文字位置默认0px
  - fontColor : string // 文字颜色默认黑色 #000
  - fontSize : string | number // 字体大小默认22px
  - fontStyle : string // 字体样式默认sans-serif
  - fontWeight : string | number // 字体粗细默认400
  - lineHeight : string | number // 字体行高默认字体大小
  - wordWrap : boolean // 文字自动换行默认true
  - lengthLimit : string | number // 换行宽度范围默认90%
  - lineClamp : number // 文本移除隐藏默认Infinity
- images : Array<object> // 奖品图片
  - src : string // 图片路径
  - top : string | number // 图片位置默认0px
  - width : string | number // 图片宽度默认0px
  - height : string | number //图片高度默认0px