用html+js实现9宫格翻牌抽奖【建议收藏】

在前端浏览器页面，我们想实现抽奖的功能，铁子们可以朝这儿看齐，9个格子可以填写9份礼物，而且礼物可以控制位置，公司举办活动啥的直接就能用，方便实用；

1、效果展示

2、代码分享

<!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: '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(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>

用html+js实现9宫格翻牌抽奖【建议收藏】相关推荐

微信小程序 9宫格翻牌动画
9宫格翻牌需求: 1.进来时平铺9个格子显示 2.点击开始抽奖时洗牌动作 3.洗完牌后呈现9个都是未翻牌的状态 4.点击任意一个牌子,有翻转的动作 5.翻转结束后出现中奖的弹窗 555,当时真的一点一 ...
HTML六宫格转盘抽奖页面设计，选项区块为自定义文字
本文演示一个六宫格抽奖的事例,网上也有很多模板,不过背景都是一整张图片,无法自定义内容,本文就给出可以自定义文字内容的的抽奖页面. <!DOCTYPE html> <html sli ...
H265编码视频流媒体播放器EasyPlayer.js支持9宫格视频同屏播放的写法
TSINGSEE青犀视频开发的播放器项目EasyPlayer有很多个分支,其中 EasyPlayer.js就是集成在EasyNVR.EasyGBS等平台内进行直播的网页播放器,并且EasyPlayer ...
vue 图片宫格_微信小程序多宫格/九宫格抽奖基于vue来写
/*整体布局采用定位实现 gameBox:父盒子,最外层背景图 bg1:灰色灯 bg2:点击开始按钮后,白色灯出现,同时要每个500s同bg1做切换隐藏显示 start:按钮样式 item1-8:通过 ...
16宫格的翻牌消除游戏、纯前端实现16宫格的翻牌消除游戏
16宫格的翻牌消除游戏.纯前端实现16宫格的翻牌消除游戏纯前端实现16宫格翻牌消除游戏代码,这个游戏大家应该非常熟悉,它是一个16宫格的翻牌消除游戏,点击卡片后,如果两张卡片形状相同,则同时被消除. ...
java 9宫格抽奖_前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...
JS 时间函数实现9宫格抽奖
JS 时间函数实现9宫格抽奖思路:九宫格抽奖抽象出来,其实就是点击开始按钮以后,从首个单元开始,不停的绕着8个格子转动,最后停留在目标位置. 以下是html部分: <div class=&qu ...
【面试】回文数字宫格的实现（js基础版）
前言:觉得我写的好,麻烦您点赞点关注加收藏/推荐,其他问题欢迎底部留言,佛系回复! 目录一.起因一.起因在某个群里看到"回文数字宫格"的面试题: 于是我在假期,研究出了这个& ...
flv.js播放卡顿，短线重连，包括九宫格，四宫格，一宫格
解决flv.js断网重连等一些问题这里简单做一下改动请看下图这张图片就展示了宫格以及设备等一些问题附上解决断流以及卡顿的代码,各位前端的精英,看看就能懂 this.$nextTick(() = ...

用html+js实现9宫格翻牌抽奖【建议收藏】

1、效果展示

2、代码分享

用html+js实现9宫格翻牌抽奖【建议收藏】相关推荐

最新文章

热门文章