学问"/>
抽奖的学问
为什么自己在某些平台抽奖抽不到？为什么中奖的永远都不是自己？为什么别人都中奖了自己却中不了？这些问题我会统统为大家解答。
有时候在抽奖的时候会看到一等奖是一辆汽车或者一套房。甚至更加离谱的奖品，抱着不花钱试试看的态度就去了，抽了十几次虽然一分钱没有花而且还中了一些小的礼品或者小额优惠券。自己有时还感觉乐在其中，那我就带大家深度了解一下某些平台的抽奖问题。
const list = [{id:1,name:'“保时捷911”100元优惠券',is :true },{id:2,name:'“奥迪A8”100元优惠券',is :true },{id:3,name:'"劳斯莱斯幻影"1W元优惠券',is :true },//带有is的选项为可以抽取的奖项{id:4,name:'“保时捷911”新车一辆'},{id:5,name:'“奥迪A8”新车一辆'},{id:6,name:'“劳斯莱斯幻影”新车一辆'},{id:7,name:'“兰博基尼爱马仕”新车一辆'},{id:8,name:'“布加迪威龙”新车一辆'},{id:9,name:'“法拉利FXXK”新车一辆' }]先写一个集合，集合里面放了一些 奖品，里面设置一些普通的奖品和特殊的奖品。
// 中奖项const isArr = list.filter(v => v.is)// 非中奖项const noArr = list.filter(v => !v.is)我在后面标有is:true元素的对象为普通奖品，就意味这你只会在这些奖品在抽取。没有标记的对象就不在你的奖品列表里面。
countEL.innerHTML = count// 当抽奖次数为0的时候，就把剩余的奖项全部展示出来if (count === 0) {setTimeout(() => {box.querySelectorAll('.style1').forEach(v => {v.classList.add('hide')if (v.nextElementSibling.className.indexOf('show') === -1) {const item = noArr.pop()v.nextElementSibling.innerHTML = item.name}})setTimeout(() => {box.querySelectorAll('.style2').forEach(v => {if (v.className.indexOf('show') === -1) {v.classList.add('show-result')}})}, 400)}, 1000)当你把抽奖的次数用完之后就会显示出所有奖品。
setTimeout(() => {// 从非中奖项中取最后一个，并从数组中移除该项const item = isArr.pop()const style2 = me.querySelector('.style2')style2.innerHTML = item.namestyle2.classList.add('show')}, 400)然后就让你在你的奖品区内循环抽取被标记的普通奖品，注意这里你抽奖的次数要小于你普通奖品设置的个数。这样就可以让你百分百抽到奖品，且不是大奖的关键。如果是获取单次次数然后单次抽取的话，那就更简单直接循环抽取普通奖品就行了。
countEL.innerHTML = count// 当抽奖次数为0的时候，就把剩余的奖项全部展示出来if (count === 0) {setTimeout(() => {box.querySelectorAll('.style1').forEach(v => {v.classList.add('hide')if (v.nextElementSibling.className.indexOf('show') === -1) {const item = noArr.pop()v.nextElementSibling.innerHTML = item.name}})setTimeout(() => {box.querySelectorAll('.style2').forEach(v => {if (v.className.indexOf('show') === -1) {v.classList.add('show-result')}})}, 400)}, 1000)等你把抽奖次数用完之后就显示出所有奖品。可恨自己总是差一点点就抽到大奖。这个代码大致就是这样，感兴趣的话可以把我下面的代码复制，自己去试试。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>9宫格翻牌抽奖</title><style>.title {text-align: center;}.box {display: flex;flex-wrap: wrap;justify-content: center;width: 330px;margin:0 auto;}.item {position: relative;margin: 5px;width: 100px;height: 100px;}.style1, .style2 {position: absolute;left:0;top: 0;bottom: 0;right: 0;display: flex;justify-content: center;align-items: center;border-radius: 5px;text-align: center;transition: transform .4s}.style1 {background-color: #ff8800;color: #fff;}.style2 {color: #ff8800;border:1px solid #ff8800;padding: 0 10px;transform: scaleX(0);background-color: #ffe6c9;}.hide {transform: scaleX(0);}.show {transform: scaleX(1);}.show-result {transform: scaleX(1);opacity: 0.5;}</style>
</head>
<style>
</style>
<body>
<div class="title">可抽奖<label id="count">0</label>次</div>
<div class="box"></div>
</body>
<script>// 奖品列表const list = [{id:1,name:'“保时捷911”100元优惠券',is :true },{id:2,name:'“奥迪A8”100元优惠券',is :true },{id:3,name:'"劳斯莱斯幻影"1W元优惠券',is :true },//带有is的选项为可以抽取的奖项{id:4,name:'“保时捷911”新车一辆'},{id:5,name:'“奥迪A8”新车一辆'},{id:6,name:'“劳斯莱斯幻影”新车一辆'},{id:7,name:'“兰博基尼爱马仕”新车一辆'},{id:8,name:'“布加迪威龙”新车一辆'},{id:9,name:'“法拉利FXXK”新车一辆' }].sort(v => Math.random() - 0.5)// 中奖项const isArr = list.filter(v => v.is)// 非中奖项const noArr = list.filter(v => !v.is)// 抽奖次数let count = 3const box = document.querySelector('.box')const countEL = document.querySelector('#count')countEL.innerHTML = countbox.innerHTML = list.map(v => {return `<div class="item" onclick="fp(this)"><div class="style1">抽奖</div><div class="style2"></div></div>`}).join('')// 翻牌抽奖const fp = (me) => {if (count === 0) {return}me.querySelector('.style1').classList.add('hide')// 抽奖动画setTimeout(() => {// 从非中奖项中取最后一个，并从数组中移除该项const item = isArr.pop()const style2 = me.querySelector('.style2')style2.innerHTML = item.namestyle2.classList.add('show')}, 400)count--countEL.innerHTML = count// 当抽奖次数为0的时候，就把剩余的奖项全部展示出来if (count === 0) {setTimeout(() => {box.querySelectorAll('.style1').forEach(v => {v.classList.add('hide')if (v.nextElementSibling.className.indexOf('show') === -1) {const item = noArr.pop()v.nextElementSibling.innerHTML = item.name}})setTimeout(() => {box.querySelectorAll('.style2').forEach(v => {if (v.className.indexOf('show') === -1) {v.classList.add('show-result')}})}, 400)}, 1000)}}
</script>
</html>更多推荐
抽奖的学问
发布评论