js实现九宫格翻牌抽奖（怎么也抽不中大奖系列）

先来看一下效果：

实现原理：

将小奖品（即官方让你中奖的奖品）中添加一个中奖项状态，定义为true，以此即可产生中奖项与非中奖项两个数组；每次翻牌抽奖时就会从非中奖项中取最后一个，并从数组中移除该项；当抽奖次数为0的时候，就把剩余的奖项全部展示出来；css定义翻牌前后两种风格，transform: scaleX(num)中num为1或0控制元素的显示与隐藏

实现代码：

<!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>九宫格翻牌抽奖</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: '1元优惠券', is: true},{id: 2, name: '10元优惠券', is: true},{id: 3, name: '谢谢惠顾', is: true},{id: 4, name: '豪华电动车'},{id: 5, name: '1w购物券'},{id: 6, name: '5w购物券'},{id: 7, name: '豪华轿车'},{id: 8, name: '房子一套'},{id: 9, name: '顶配笔记本'}].sort(() => 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>

js实现九宫格翻牌抽奖（怎么也抽不中大奖系列）相关推荐

java 9宫格抽奖_前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...
PHP九宫格翻牌抽奖,PHP 九宫格抽奖代码
商城中营销活动最常见的就是大转盘抽奖了最近SHOPNC中正好需要这个12宫格抽奖,今天整理了下. 前端主要代码友情提示:每次抽奖消耗5个百利积分我的积分:19分 10倍积分 40倍积分 20倍积分 ...
vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）
No.1 九宫格 1.1 九宫格抽奖使用的是组件lattice-lotteryhttps://h5-group.github.io/lattice-lottery/ # vue2 # 安装 sh np ...
java 9宫格抽奖_原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下上代码: 谢谢惠顾十万元现金谢谢惠顾 iphone11 抽奖美的冰箱谢谢惠顾 50元红包谢谢惠顾 CSS样式代码: ...
js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能首先是html部分: <div class="box"><div class="div2">短裙</ ...
用html+js实现9宫格翻牌抽奖【建议收藏】
在前端浏览器页面,我们想实现抽奖的功能,铁子们可以朝这儿看齐,9个格子可以填写9份礼物,而且礼物可以控制位置,公司举办活动啥的直接就能用,方便实用: 1.效果展示 2.代码分享 <!DOCTYP ...
JS实现转动随机数抽奖的特效代码
JS实现转动随机数抽奖的特效代码大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...
翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）
使用原生JS实现的滚动抽奖效果,可对每个奖品设置概率实现以下功能: 1.可针对每个奖品设置概率 2.可设置最少滚动圈数 3.可设置滚动速度 4.可设置从倒数第几个开始减慢速度演示图 HTML部分 ...

js实现九宫格翻牌抽奖（怎么也抽不中大奖系列）

js实现九宫格翻牌抽奖（怎么也抽不中大奖系列）相关推荐

最新文章

热门文章