vue写转盘抽奖功能及可根据概率去计算

2019-11-01 admin

最近在做一个大转盘抽奖获取金币及激励视频,刚开始要求前端自己根据后台返的每块概率去写逻辑,后来被驳回了,不过本次记录一下写的。

  1. html部分

`<div class=“lucky-bg relative”>

        <img src="../assets/images/point.png" class="abs point-img" />
        <div class="lucky-wheel auto">
            <img src="../assets/images/p2.png" class="abs point-bg" />
            <img src="../assets/images/p1.png" class="abs point-bg1" />
            <div class="wheel-main com-bg relative">
                <img
                    src="../assets/images/p3.png"
                    class="abs com-img point-bg2"
                    style="top: 0.35rem;width: 15rem;left: 0.5rem;"
                />
                <div class="wheel-pointer-box" @click="hasTimes ? rotateFun():''">
                    <div class="wheel-pointer"></div>
                    <img src="../assets/images/word.png" class="word abs" />
                </div>
                <div
                    class="wheel-bg"
                    :style="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }"
                >
                    <img src="../assets/images/wheel.png" class="com-img" />
                    <!-- <div class="prize-list">
                    <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                        <div class="prize-type">{{item.name}}</div>
                    </div>
                    </div>--> //这里写是自己手写奖品,现做成了一个图片
                </div>
            </div>
        </div>
    </div>
    <div class="wheel-line">
        <img src="../assets/images/line1.png" class="line" />
        <div class="power">
            今日剩余次数
            <span>{{100-detail.turntable_number}}次</span>
        </div>
    </div>`

  1. js部分、

` data () {

    return {
  detail:{
    "turntable_number": 10, //己玩转盘次数,
    probability:['10%','20%','30%','5%','5%','10%','5%','15%'],//扇区指标
    "treasure_chest1": "0", //第一个宝箱 0无权开启 1有权开启 3己开启
    "treasure_chest2": "1",
    "treasure_chest3": "0",
    "treasure_chest4": "1",
    "treasure_chest5": "1",
  },
      hasTimes: true,
        rotateAngle: 0, //将要旋转的角度
        startRotatingDegree: 0, //初始旋转角度
        rotateTransition: '',//控制过渡效果
        totalNum: 100,
        nowTimes: 0,
        restaraunts: ['神秘宝箱', '50', '神秘宝箱', '60', '神秘宝箱', '70', '神秘宝箱', '90'],
        prize: '',
        nowIndex: 0
 }`

  1. 方法部分

`random (rate) {

        let random = Math.floor(Math.random() * 100); //随机数
        console.log(random, '随机数')
        let myRandom = [];
        let randomList = [];
        let randomParent = [];
        for (let i = 0; i < 100; i++) {
            myRandom.push(parseInt([i]) + 1);
        }
        for (let i = 0; i < rate.length; i++) {
            let temp = [];
            let start = 0;
            let end = 0;
            randomList.push(parseInt(rate[i].split('%')[0]));
            for (let j = 0; j < randomList.length; j++) {
                start += randomList[j - 1] || 0
                end += randomList[j]
            }
            temp = myRandom.slice(start, end);
            randomParent.push(temp)
        }
        console.log(randomParent)
        for (let i = 0; i < randomParent.length; i++) {
            if (randomParent[i].includes(random)) {
                this.nowIndex = i + 1;
                return (i + 1)
            }
        }
    },
    // 转动
    rotateFun () {
        if (!this.hasTimes) return;
        let during_time = 5; // 默认为1s
        let resultNum = this.random(this.detail.probability) //当前值
        console.log(resultNum, 'resultNum')
        // let random = Math.floor(Math.random() * 8);
        let result_angle = 45; //最终会旋转到下标的位置所需要的度数
        let rand_circle = 6; // 附加多转几圈,2-3
        this.hasTimes = false; // 旋转结束前,不允许再次触发
        // 转动盘子
        this.prize = this.restaraunts[this.nowIndex];
        console.log(this.prize, 'this.prize')
        let rotate_angle = this.startRotatingDegree + rand_circle * 360 +
            result_angle * resultNum -
            this.startRotatingDegree % 360;
        this.startRotatingDegree = rotate_angle;
        this.rotateAngle = "rotate(" + rotate_angle + "deg)";
        console.log(rotate_angle, 'this.rotateAngle')
        var that = this;
        // 旋转结束后,允许再次触发
        setTimeout(function () {
            that.gameOver();
        }, during_time * 1000); // 延时,保证转盘转完
    },
    gameOver () {
        // if (this.nowTimes < 5) {
        this.hasTimes = true;
        this.detail.turntable_number = this.detail.turntable_number + 1;
        this.totalNum = 100 - this.detail.turntable_number;
        times.$emit("clickTime", this.detail.turntable_number)
        if (this.detail.turntable_number == 100) {
            this.hasTimes = false;
        }
        console.log(this.nowTimes, this.totalNum)

    }`     

[转载]原文链接:https://segmentfault.com/a/1190000020877911

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78756.html

文章标题:vue写转盘抽奖功能及可根据概率去计算

相关文章
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部