vue实现在线抽奖

最新推荐文章于 2025-05-31 11:51:57 发布

im2vegetable

最新推荐文章于 2025-05-31 11:51:57 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript vue 文章标签： vue 抽奖

本文链接：https://blog.csdn.net/qq_15009269/article/details/103089238

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文详细解析了基于Vue.js的抽奖应用中单次抽奖逻辑的实现，通过概率权重分配完成抽奖过程。同时介绍了如何利用HTTP请求加载和保存抽奖配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览:http://icelily.xyz/lottery

完整项目:https://github.com/tinslychong/vue_lottery

部分实现与代码:
1、单次抽奖逻辑:

    lotteryOne() {
      var pos = [];
      pos.push(0);
      var count = 0;
      for (var i = 0; i < this.tableData.length; i++) {
        count += parseFloat(this.tableData[i].value);
        pos.push(count);
      }
      var ran = Math.random() * 100;
      for (var i = 0; i < pos.length - 1; i++) {
        if (ran >= pos[i] && ran < pos[i + 1]) {
          break;
        }
      }
      return this.tableData[i];
    }
  },

这里tabledata的数据结构为{name:xx,value:xx}
value为物品的概率（百分比)

2、载入和保存配置
载入:

  onLoadConfig() {
  this.$reqs.get(this.selected_config+"?"+Math.random()*1000).then(resp => {
          _this.tableData = resp.data.data;
        });
    },