h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
类别:Web前端 浏览量:1417
时间:2021-10-16 00:01:32 h5抽奖的弹框制作
html5实现九宫格抽奖可固定抽中某项奖品原生js写的一个九宫格抽奖程序 (周末在家闲着也是闲着)
我写的这个抽奖是拿来整蛊我女朋友, 因为每次抽奖的结果都是同一个。。
哈哈哈哈哈哈哈哈哈哈哈哈哈
我会附上正常抽奖的的代码和固定只能抽到某一个的代码;
HTML代码如下 ⤵️
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抽奖</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html, body, .modal-cover { width: 100%; height: 100%; } body { background: url('./img/background.jpg" alt="h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)" border="0" />
js代码👇
// 封装工具函数 const util = { getELe: (str) => { return document.querySelector(str) }, getELes: (str) => { return document.querySelectorAll(str) } } let items = util.getELes(".item-box"), covers = util.getELes('.cover'), imgArr = ['CHANEL', 'Dior', 'givenchy', 'dabao', 'empty', 'lamer', 'lancome', 'yashilandai', 'YSL', ] for (let i = 0; i < items.length; i++) { if (imgArr[i] === 'empty') continue; let el = items[i]; el.style.backgroundImage = `url(./img/${imgArr[i]}.jpg" alt="h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)" border="0" />
如果想设置固定抽中某个奖项,// if (count === 40) 这个count的值需要你自己去算一下,图片自己选几个。
代码copy可直接运行。
最终效果,有点丑。你们想玩的自己发挥下吧。
到此这篇关于html5实现九宫格抽奖可固定抽中某项奖品的文章就介绍到这了,更多相关html5九宫格抽奖内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- html5 meta标签
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5字体倾斜代码(html5响应式开发自动计算fontSize的方法)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5加入图片(HTML5 图片预加载的示例代码)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- html5的语法变化(详解HTML5.2版本带来的修改)
- html5功能讲解(Html5定位终极解决方案)
- 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
热门推荐
- python零基础实战项目(十个Python练手的实战项目,学会这些Python就基本没问题了推荐)
- dedecms如何做弹窗(dedecms实现将表单订单发送到邮箱实例代码)
- docker 清除none镜像(删除docker images中为none的镜像操作)
- nginx配置https转发规则(Nginx配置https原理及实现过程详解)
- 12步轻松搞定python装饰器(Python3.5装饰器典型案例分析)
- 如何测试idea启动tomcat成功(解决IDEA配置tomcat启动报错问题)
- laravel有哪些长期支持版本(Laravel中9个不经常用的小技巧汇总)
- 数据推入阿里云rds(将阿里云RDS中的数据库迁移到本机自建数据库的可用过程RDS数据迁移)
- wordpress的静态php页面在哪(如何让PHPnow支持wordpress静态化链接的方法)
- asp.net去除字符串中html标签