小程序抽奖

最新推荐文章于 2023-06-15 00:28:24 发布
最新推荐文章于 2023-06-15 00:28:24 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： 小程序 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37190789/article/details/105419182
版权

很多应用中都会存在抽奖的需求，而且这种功能也很常见，最近在项目中我也遇到了这样的需求。对其探讨如下：

我遇到的是商品需积分抽奖，而且不会存在于不中奖的情况，不过也可以根据自己的需求来在我这个demo上的需求进行修改。

1.需求

消耗一定的积分，进行一次抽奖，在抽奖完成以后，需扣除对应的积分。
  • 开始 转动时速度很慢
  • 转动过程中很快
  • 结束时，拿到后台的中奖信息，转盘速度变慢

2.实现(转盘抽奖)

由于项目中设定了8个奖项，所以需要设置8个区间

区间[0,45][46,90][91,135][136,180][181,225][226,270][271,315][316,360]
奖项1等奖2等奖3等奖4等奖5等奖6等奖7等奖8等奖
  1. 通过随机数，给定一个中奖角度
  2. 设定转盘的旋转的圈数，并且不断累加角度（目的是转动多圈），其终止条件是旋转角度>圈数*360+中奖角度
  3. 根据中奖角度找到对应的奖项
2.1 目录结构

在这里插入图片描述

2.2 代码

index.wxml

<!--pages/lottery/lottery.wxml-->

<header-tip></header-tip>

<view class="lottery_box">
  <view class="tit_img">
    <image src="../../images/jy/lottery/title@3x.png" mode="widthFix" />
  </view>

  <view class="lottery_con">
    <view class="turntable_box">
      <view class="turntable_con" style='transform:rotate({{change_angle}}deg)'>
        <view class="item">
          <image src="../../images/jy/lottery/icon01@3x.png" />
          <text>积分商品</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon02@3x.png" />
          <text>100积分</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon03@3x.png" />
          <text>积分商品</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon01@3x.png" />
          <text>9折优惠券</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon02@3x.png" />
          <text>积分商品</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon03@3x.png" />
          <text>积分商品</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon02@3x.png" />
          <text>积分商品</text>
        </view>
        <view class="item">
          <image src="../../images/jy/lottery/icon02@3x.png" />
          <text>积分商品</text>
        </view>
      </view>
      <image src="../../images/jy/lottery/btn@3x.png" mode="widthFix" class="go" bindtap="luckDrawStart"/>
    </view>
  </view>
</view>


<view class="bg_img">
  <image src="../../images/jy/lottery/bg@3x.png" mode="widthFix" />
</view>

<!-- 奖品弹窗 -->
<view class='popBox' hidden="{{ hideLotteryPop }}">
  <form style="transform: translateY(-62rpx);">
    <view class='pop'>
      <view class="pop_tit" style="letter-spacing: 0; font-weight: bold;">获得精美礼品一份</view>
      <view class='pop_con'>
        <view class="editorDia_box">
          <!-- 精美礼品 -->
          <view class="lotteryDia_gift">
            <view class="img">
              <image src="../../images/jy/lottery/icon02@3x.png" />
            </view>
            <text class="stit">礼盒</text>
            <view class="btn">立即领取</view>
          </view>
        </view>
      </view>
      <image src="../../images/jy/close@3x.png" class="pop_close" catchtap="popClose" />
    </view>
  </form>
</view>

index.js

// 上下文对象
var that;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hideRulePop: true, // 隐藏抽奖规则弹窗
    hideLotteryPop: true, // 隐藏奖品弹窗

    is_play: false,// 是否在运动中，避免重复启动bug
    available_num: 0,// 可用抽奖的次数，可自定义设置或者接口返回
    start_angle: 0,// 转动开始时初始角度=0位置指向正上方，按顺时针设置，可自定义设置
    base_circle_num: 9,// 基本圈数，就是在转到（最后一圈）结束圈之前必须转够几圈 ，可自定义设置
    low_circle_num: 5,// 在第几圈开始进入减速圈（必须小于等于基本圈数），可自定义设置
    add_angle: 10,// 追加角度，此值越大转动越快，请保证360/add_angle=一个整数，比如1/2/3/4/5/6/8/9/10/12等
    use_speed: 1,// 当前速度，与正常转速值相等
    nor_speed: 1,// 正常转速，在减速圈之前的转速，可自定义设置
    low_speed: 10,// 减速转速，在减速圈的转速，可自定义设置
    end_speed: 20,// 最后转速，在结束圈的转速，可自定义设置
    random_angle: 0,// 中奖角度，也是随机数，也是结束圈停止的角度，这个值采用系统随机或者接口返回
    change_angle: 0,// 变化角度计数，0开始，一圈360度，基本是6圈，那么到结束这个值=6*360+random_angle；同样change_angle/360整除表示走过一整圈
    result_val: "未中奖",// 存放奖项容器，可自定义设置
    Jack_pots: [// 奖项区间 ，360度/奖项个数 ，一圈度数0-360，可自定义设置
      // random_angle是多少，在那个区间里面就是中哪个奖项
      {
        startAngle: 0,
        endAngle: 45,
        val: "1等奖"
      },
      {
        startAngle: 46,
        endAngle: 90,
        val: "2等奖"
      },
      {
        startAngle: 91,
        endAngle: 135,
        val: "3等奖"
      },
      {
        startAngle: 136,
        endAngle: 180,
        val: "4等奖"
      },
      {
        startAngle: 181,
        endAngle: 225,
        val: "5等奖"
      },
      {
        startAngle: 226,
        endAngle: 270,
        val: "6等奖"
      },
      {
        startAngle: 271,
        endAngle: 315,
        val: "7等奖"
      },
      {
        startAngle: 316,
        endAngle: 360,
        val: "8等奖"
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    // that.luckDrawStart();
  },

  /**
   * 启动抽奖
   */
  luckDrawStart: function () {
    // 阻止运动中重复点击
    if (!that.data.is_play) {
      // 设置标识在运动中
      that.setData({
        is_play: true
      });
      // 重置参数
      that.luckDrawReset();
      // 几率随机，也可从服务端获取几率
      that.setData({
        random_angle: Math.ceil(Math.random() * 360)
      });
      // 运动函数
      setTimeout(that.luckDrawChange, that.data.use_speed);
    };
  },

  /**
   * 转盘运动
   */
  luckDrawChange: function () {
    // 继续运动
    if (that.data.change_angle >= that.data.base_circle_num * 360 + that.data.random_angle) {// 已经到达结束位置
      // 提示中奖，
      that.getLuckDrawResult();
      // 运动结束设置可用抽奖的次数和激活状态设置可用
      that.luckDrawEndset();
    } else {// 运动
      if (that.data.change_angle < that.data.low_circle_num * 360) {// 正常转速
        // console.log("正常转速")
        that.data.use_speed = that.data.nor_speed
      } else if (that.data.change_angle >= that.data.low_circle_num * 360 && that.data.change_angle <= that.data.base_circle_num * 360) {// 减速圈
        // console.log("减速圈")
        that.data.use_speed = that.data.low_speed
      } else if (that.data.change_angle > that.data.base_circle_num * 360) {// 结束圈
        // console.log("结束圈")
        that.data.use_speed = that.data.end_speed
      }
      // 累加变化计数
      that.setData({
        change_angle: that.data.change_angle + that.data.add_angle >= that.data.base_circle_num * 360 + that.data.random_angle ? that.data.base_circle_num * 360 + that.data.random_angle : that.data.change_angle + that.data.add_angle
      });
      setTimeout(that.luckDrawChange, that.data.use_speed);
    }

  },

  /**
   * 重置参数
   */
  luckDrawReset: function () {
    // 转动开始时首次点亮的位置，可自定义设置
    that.setData({
      start_angle: 0
    });
    // 当前速度，与正常转速值相等
    that.setData({
      use_speed: that.data.nor_speed
    });
    // 中奖索引，也是随机数，也是结束圈停止的位置，这个值采用系统随机或者接口返回
    that.setData({
      random_angle: 0
    });
    // 变化计数，0开始，必须实例有12个奖项，基本是6圈，那么到结束这个值=6*12+random_number；同样change_num/12整除表示走过一整圈
    that.setData({
      change_angle: 0
    });
  },

  /**
   * 获取抽奖结果
   */
  getLuckDrawResult: function () {
    for (var j = 0; j < that.data.Jack_pots.length; j++) {
      // 随机获取的值再
      if (that.data.random_angle >= that.data.Jack_pots[j].startAngle && that.data.random_angle <= that.data.Jack_pots[j].endAngle) {
        that.setData({
          result_val: that.data.Jack_pots[j].val
        });
        // wx.showModal({
        //   title: '抽奖结果',
        //   content: that.data.Jack_pots[j].val,
        // })
        that.setData({
          hideLotteryPop: false
        })
        break;
      };
    };
  },

  /**
   * 更新状态（运动结束设置可用抽奖的次数和激活状态设置可用）
   */
  luckDrawEndset: function () {
    // 是否在运动中，避免重复启动bug
    that.setData({
      is_play: false
    })
    // 可用抽奖的次数，可自定义设置
    that.setData({
      available_num: that.data.available_num - 1
    });
  },

  // 打开抽奖规则弹窗
  openRule() {
    this.setData({
      hideRulePop: false
    })
  },

  // 规则弹窗确定键
  popSubmit() {
    this.setData({
      hideRulePop: true
    })
  },

  // 关闭弹窗
  popClose() {
    this.setData({
      hideLotteryPop: true
    })
  },
})

index.wxss

 主要贴出逻辑代码，样式部分代码就不展示了。

3.最终效果如下：

在这里插入图片描述
有兴趣的小伙伴可以去我的github地址上下拉代码，进行体验。

hello、深海鱼
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序抽奖Demo
05-07
小程序抽奖Demo，与淘宝上的比较类似，感兴趣的可以下载下来参考一下
微信小程序---抽奖
weixin_56848461的博客
11-14 2004
微信小程序抽奖实现代码
微信小程序抽奖 简单功能实现
m0_70782896的博客
04-17 2551
实现了一个简单的地奖功能，田户点击“开始抽奖“按知后，抽奖结里会从奖品列表中贿机选取并不断滚动，最终停止时显示中奖结果，并弹出模态框展示中奖结果。您可以根据实际需求进行修改和扩展。
微信小程序——抽奖之九宫格
qq_44645934的博客
06-15 1100
微信小程序——抽奖之九宫格。
小程序/公众号抽奖活动页面-逻辑
ljw的博客
02-03 723
后台返回对应的奖品数据，小程序以九宫格形式展示奖品信息，点击抽奖后转动转盘，通过接口获取奖品对应的位置，并把奖品位置高亮显示。
做一个好看的微信小程序抽奖页面
gsgsgs1234的博客
04-16 2163
在微信小程序中做一个好看的抽奖界面 先上图片吧： 基本上格式就是八个抽奖按钮，中间一个开始按钮，后面在加一张好看的背景图就完事啦 接下来就是代码啦： js中： var app = getApp() Page({ data: { circleList: [],//圆点数组 awardList: [],//奖品数组 colorCircleFirst: '#FFDF2F',//圆点颜色1 colorCircleSecond: '#FE4D32',//圆点颜色2 colorAwardDefa
微信小程序抽奖代码-转盘抽奖
08-28
微信小程序抽奖代码-转盘抽奖
基于java开发的小程序抽奖转盘
最新发布
03-30
基于java开发的小程序抽奖转盘
微信小程序抽奖代码可自定义中奖概率.zip
07-24
微信小程序抽奖轮盘,可定义抽奖概率 从抽奖转盘的图中我们可以看出，抽奖转盘由外圆、扇面抽奖选项、抽奖按钮组成，其中外圆不难实现，大家在处理微信小程序头像的时候估计都已经用过了，那就是利用border-radius:50...
微信小程序抽奖页面
01-27
小程序抽奖页面 git clone https://github.com/zpzxgcr/choujiang.git 克隆下面直接运行就可以了 微信小程序抽奖页面
微信小程序-年会抽奖“小”程序
08-07
佣金宝年会抽奖系统 使用说明 js/users.js 名单及图片地址数据(一个json数组) 图片放置在photos目录 o键: 清除中奖数据 enter键：开始/暂停 抽奖 s键: 显示已抽人数 ctrl [1~9] 快速设置抽取人数 时间仓促。chrome 支持良好。其它浏览器未考虑兼容。那么代码凌乱啥的也就没考虑了。后面会优化。 本公司有优秀的产品，优秀的妹子，钱多，速来。现急需 java , C , 大数据 等各方面人才。有意向可发邮件 [email protected]
抽奖小程序
12-10
点击”开始抽奖“按钮，使用JS定时器产生随机数，点击“结束抽奖”，JS定时器停止，显示一个随机数
抽奖小程序抽奖小程序
02-14
有关奖项设置可在config.ini文件中直接修改： 奖项等级数为 [option] Lucks= //填入数字 相应等级设置为 [Luck*] //*代表所在等级 Name＝ //填入奖项名称 Num＝ //填入设奖数目 Award= //填入奖品名称 程序其他相关设置既可以在程序中设置，也可直接在config.ini文件中修改
抽奖小程序.exe
03-13
专为抽奖制作的专业软件，支持激光笔进行抽奖，保存抽奖记录。可选择抽奖类型，每次抽奖人数，中奖人完全随机，无任何作弊方法。 节日年会的优秀抽奖软件。
javascript编写的抽奖小程序
热门推荐
草木红的博客
08-01 10万+
js写的抽奖系统，旨在提供一个思路
微信小程序抽奖插件分享
一个超爱喝可乐的web前端攻城狮
04-06 1218
这样我们刷新页面即可实现抽奖功能;该网站有这么多示例可以选择。
微信小程序九宫格抽奖和转盘抽奖的实现
weianl的博客
05-07 1万+
描述： 最近在工作中遇到了小程序抽奖的一些页面制作，以前制作网页抽奖的时候，在jQuery插件库谁便找一个Demo就可以满足我们的需求了，自己动手写的话不仅会拖慢项目进度，而且写出来的也未必有别人的那么流畅自然。而在小程序中我们就没有这么幸福了(ಥ﹏ಥ)，并没有丰富的插件库供给我们使用，所以该写的还得自己动手写。好了，下面是常见的两种抽奖方式：九宫格和转盘，在实际项目中用的还不错，分享给大家。 一、九宫格抽奖： 效果： 思路：    首先是结构上，用弹性布局就可以了，每一个奖品的宽度设置成3分之1，超
微信抽奖活动小程序制作步骤有这篇就够了
feidododekefu的博客
01-11 2468
微信抽奖活动小程序制作步骤有这篇就够了
微信小程序抽奖前后端
10-17
微信小程序抽奖的前后端实现需要以下几个步骤： 1. 前端页面设计：设计抽奖页面，包括抽奖按钮、中奖提示等。 2. 前端与后端交互：前端通过调用后端接口获取抽奖结果。 3. 后端接口设计：设计后端接口，包括获取奖品列表、抽奖等。 4. 后端逻辑实现：实现后端接口的具体逻辑，包括生成随机数、判断是否中奖等。 5. 数据库设计：设计数据库表结构，存储奖品信息、中奖记录等。 6. 数据库操作实现：实现对数据库的增删改查操作，包括添加奖品、记录中奖信息等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值