Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率

最近公司要做一个转盘抽奖的效果，但是我们可以控制转盘抽奖的概率，自己用es6简单的实现了下，中间虽然遇到一些问题，但最终都是解决了，下面说一下我的思路。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="css/index.css"><script src="js/index.js"></script></head><body><div class="main"><div class="active"><div class="rotate_title"><img src="data:images/rotate_title.png" alt=""></div><div class="rotate"><div class="zd_round"><img src="data:images/zd.png" alt=""></div><div class="pointer"><img src="data:images/pointer.png" alt="" width="100%"></div></div></div></div><script>new Draw({el: ".zd_round img",//转动的元素btn:".pointer", //点击转动的元素count: 3, //转盘转动的圈数,chance: {1: "40%",5: "40%", //指定抽奖概率，其余则平分},num:8,//转盘的总个数innerTime:4000, //转盘转动的时间endFunc:function(pos){console.log(pos)} //转盘动画结束后的回调函数})</script></body>
</html>

上面是html代码，我就不多做介绍了，效果原理主要还是利用css3 的rotate属性实现元素的旋转，下面我们看js代码，我们使用的事面向对象编程，我们可以在前台配置参数多次调用。下面我们开始js代码的编写：

(function () {function $_(name) {return document.querySelector(name);}class Draw {constructor(opt) {}}window.Draw=Draw;
})();

首先我们通过一个匿名函数自执行的方式，这样做的好处的是防止内部的变量污染全局，里面的变量都形成了一个局部变量，最下面我们通过把Draw类暴露给全局，这样我们就可以在外部直接调用。

 constructor(opt) {let defaultopt = {el: ".zd_round img",//转动的元素btn: ".pointer", //点击转动的元素count: 3, //转盘转动的圈数,chance: {1: "40%",5: "40%", //指定抽奖概率，其余则平分},num: 8,//转盘的总个数innerTime: 4000 //转盘转动的时间}opt = Object.assign({}, defaultopt, opt);this.init(opt);}

　我们需要知道的是这是一个构造函数，当我们new 一个类的时候会执行构造函数，把this绑定的属性方法添加到这个类上面，可以看到我们做的事把我们外部调用的参数和我们内部调用的参数的一个合并，我们用到的是es6的Object.assign的方法，不同的童鞋请自行百度，最后我们得到了合并后的一个对象。

 init(opt) {let { el, chance, count, num, btn, innerTime ,endFunc} = opt;let numArray = Object.keys(chance);this.residue = [];for (let i = 0; i < num; i++) {if (!numArray.includes(String(i))) {this.residue.push(i)}}this.pos = this.getNum(chance);   //确定转盘最后停留的位置this.deg = 360 / num;this.rotate(el, count, btn, innerTime,endFunc);
}

init函数主要做一些初始化操作，通过es6解构赋值保存传进来的参数，主要难点怎么控制概率，我下面定义了一个方法getNum来获取最后停留的位置，我定义了一个变量得到0-100的随机数，通过传进来的概率值来判断，这个不好描述，通过举例说明：

var n1 = Math.round(Math.random() * 100); //获取100之内的任意一个整数；
if (n1 < 95) {console.log(我是几率为95 % 的)
} else {console.log(我是几率为5 % 的)
}

有了这个思路就简单多了，我们可以通过传进来的概率对象进行遍历来判断，如果在概率范围内直接return出这个对象的索引，也就是概率的选项，那么就会有一个问题，就是如果配置的选项都没有抽中，我们该做什么处理，init函数里面我们定义了一个数组，保存了配置选项之外的选项数组，如果没有抽中配置的选项，我们从剩下的选项中随机抽中一个。

      getNum(chance) {let n1 = Math.round(Math.random() * 100);let start = 0, end = 0;for (let key in chance) {end = start + parseInt(chance[key]);if (n1 > start && n1 < end) {return key;}start = end;}//如果配置的概率没有抽中，则剩下的商品概率评分let rad = Math.floor(Math.random() * (this.residue.length));return this.residue[rad];}

接下来就比较简单的，我们就可以操作转动的元素，以及给这个元素设置动画，这里我们用的是css3 过渡属性，所以实现起来比较简单，也不需要写定时器了。

rotate(el, count, btn, innerTime, endFunc) {var endPos = (count * 360 - this.deg / 2) + (this.pos * this.deg) + Math.random() * this.deg / 2 + 10;var btn = $_(btn);var el = $_(el);btn.onclick = () => {this.aniamte(el, endPos,innerTime);}el.addEventListener("transitionend", this.end.bind(this, endFunc), false); }
aniamte(el, endPos, innerTime) {el.style.transform = "rotate(" + endPos + "deg)";el.style.transition = "all " + innerTime + "ms linear";
}end(endFunc) {endFunc && endFunc(this.pos);
}

最后我们在动画结束后可以传入一个回调函数，这样我们用的时候就不用改内部的代码，在调用插件的时候就可以做一些操作。最后附上全部的代码，方便大家理解：

(function () {function $_(name) {return document.querySelector(name);}class Draw {constructor(opt) {let defaultopt = {el: ".zd_round img",//转动的元素btn: ".pointer", //点击转动的元素count: 3, //转盘转动的圈数,chance: {1: "40%",5: "40%", //指定抽奖概率，其余则平分},num: 8,//转盘的总个数innerTime: 4000 //转盘转动的时间}opt = Object.assign({}, defaultopt, opt);this.init(opt);}init(opt) {let { el, chance, count, num, btn, innerTime ,endFunc} = opt;let numArray = Object.keys(chance);this.residue = [];for (let i = 0; i < num; i++) {if (!numArray.includes(String(i))) {this.residue.push(i)}}this.pos = this.getNum(chance);   //确定转盘最后停留的位置this.deg = 360 / num;this.rotate(el, count, btn, innerTime,endFunc);}getNum(chance) {let n1 = Math.round(Math.random() * 100);let start = 0, end = 0;for (let key in chance) {end = start + parseInt(chance[key]);if (n1 > start && n1 < end) {return key;}start = end;}//如果配置的概率没有抽中，则剩下的商品概率评分let rad = Math.floor(Math.random() * (this.residue.length));return this.residue[rad];}rotate(el, count, btn, innerTime,endFunc) {var endPos = (count * 360 - this.deg / 2) + (this.pos * this.deg) + Math.random() * this.deg / 2 + 10;var btn = $_(btn);var el = $_(el);btn.onclick = () => {this.aniamte(el, endPos,innerTime);}el.addEventListener("transitionend", this.end.bind(this,endFunc), false);}aniamte(el, endPos, innerTime) {el.style.transform = "rotate(" + endPos + "deg)";el.style.transition = "all " + innerTime + "ms linear";}end(endFunc) {endFunc&&endFunc(this.pos);}}window.Draw=Draw;
})();

最后说一个坑，可能之前数学学多了，我们知道数学里面可以写一个变量大于小于某个数值，比如3<n<5，这个表示的是大于3小于5的一个数字，然后我在if判断也这样写，发现返回都是true.

我觉得还是老老实实的用&吧。

n1 > start && n1 < end

代码可以去我的github下载 https://github.com/shentaochok/Draw.git

寄语：怕，你就会输一辈子！

转载于:https://www.cnblogs.com/shentao11023/p/11057927.html

Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率相关推荐

vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）
No.1 九宫格 1.1 九宫格抽奖使用的是组件lattice-lotteryhttps://h5-group.github.io/lattice-lottery/ # vue2 # 安装 sh np ...
jquery php 抽奖,jquery-rotate.js制作红包大放送抽奖效果
简介现在抽奖效果在网页上已经非常常见了,以前多是 Flash 实现,但现在越来越多的使用 JavaScript 实现.两者各有优缺点,不能说哪个一定比哪个好.今天在百度糯米上看到一个"红包 ...
jQuery实现转盘抽奖效果
实现效果: 抽奖函数代码 // 抽奖函数 cjstatus = false; $("#start").on("click", function() {if (c ...
h5超简单大转盘抽奖效果（概率可控）
也不太会讲解,直接贴代码吧.内容很简单,应该都可以看懂 <!DOCTYPE html> <html lang="en"> <head><m ...
React实现大转盘抽奖效果
React利用canvas实现大转盘抽奖效果,效果如下: 大转盘效果主要代码: const drawImg = (x, y, r, num, ctx, index, img) => {ctx. ...
让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果
前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...
php比赛票数造假算法,PHP可以修改概率的抽奖算法（例如转盘等，个人感觉蛮好用）...
近几天要给网站加一个转盘抽奖的的功能,我们知道转盘抽奖这些一般情况是小件物品的中间概率远大于大件物品,这样一方面能安慰抽奖用户,另一方面对于抽奖获得的举办者不至于亏损,看下面的代码: //概率算法,6 ...
php限制一天抽奖次数_PHP可以修改概率的抽奖算法（例如转盘等，个人感觉蛮好用）...
近几天要给网站加一个转盘抽奖的的功能,我们知道转盘抽奖这些一般情况是小件物品的中间概率远大于大件物品,这样一方面能安慰抽奖用户,另一方面对于抽奖获得的举办者不至于亏损,看下面的代码: //概率算法,6 ...
Unity 之实现老虎机滚动抽奖效果
Unity 之实现老虎机滚动抽奖效果直接看下效果图吧: 制作思路: 设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环. 场景搭建: 创建Image命名为Bg作为电 ...
ES6 语法之 let、const、模板字符串、箭头函数
ES6 语法 ES6 语法简介 let 关键字模板字符串 const 关键字 js中const,var,let区别箭头函数 ES6 语法简介 ES6, 全称 ECMAScript 6.0 ,是 ...

Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率

Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率相关推荐

最新文章

热门文章