九宫格随机抽奖(html篇) |
您所在的位置:网站首页 › 九宫格抽奖素材视频 › 九宫格随机抽奖(html篇) |
实现九宫格随机抽奖的方法还是有很多的,博主的方法仅供小伙伴们参考,还请多多指教!🧐 一、代码思路实现:当点击中间的马上抽奖按钮,会自动开始顺时针跳转,并且能够随机慢慢地停止,然后弹出当前停止所获得的奖品 1、CSS样式排版: (1)500*500px的带class:banner属性的金色边框 (2)中间包裹一个460*460px的class:content内容(方便对九个格子进行排版) (3)九个格子按常规顺序(从左到右,从上到下)放置,有统一的class:box属性,及各自放置图片的属性【除了中间的按钮class:btn,这样方便后面监听事件的与其他格子区分开来】 代码语言:javascript复制 代码语言:javascript复制 .banner { width: 500px; height: 500px; border: 8px solid rgb(227, 205, 162); margin: auto; position: relative; } .content { width: 460px; height: 460px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .box { height: 150px; width: 150px; background-size: cover; } .box1 { background-image: url('./imgs/default/0001.png'); /* transition: 0.5s; */ } .box2 { background-image: url('./imgs/default/0002.png'); /* transition: 1s; */ } .box3 { background-image: url('./imgs/default/0003.png'); /* transition: 1.5s; */ } .box4 { background-image: url('./imgs/default/0004.png'); /* transition: 2s; */ } .btn { height: 150px; width: 150px; background-size: cover; background-image: url('./imgs/active/btn.45112134.png'); } .box5 { background-image: url('./imgs/default/0005.png'); /* transition: 2.5s; */ } .box6 { background-image: url('./imgs/default/0006.png'); /* transition: 3s; */ } .box7 { background-image: url('./imgs/default/0007.png'); /* transition: 3.5s; */ } .box8 { background-image: url('./imgs/default/0008.png'); /* transition: 4s; */ }2、js模块: (1)变量的定义 ①用两个数组arr1、arr2存储变化前后八个格子的图片 ②index:实时记录当前值 ③timer:定时器、span:时间间隔 ④count:记录当前次数、random:随机产生需要走的次数 ⑤award:数组记录所有获奖商品文本 ⑥isclick:当前是否可再点击 代码语言:javascript复制//记录当前值 var index = 0 var arr1 = ['./imgs/default/0001.png', './imgs/default/0002.png', './imgs/default/0003.png', './imgs/default/0004.png', './imgs/default/0005.png', './imgs/default/0006.png', './imgs/default/0007.png', './imgs/default/0008.png'] var arr2 = ['./imgs/active/0001.png', './imgs/active/0002.png', './imgs/active/0003.png', './imgs/active/0004.png', './imgs/active/0005.png', './imgs/active/0006.png', './imgs/active/0007.png', './imgs/active/0008.png'] var n = [0,1,2,4,7,6,5,3] //定时器 var timer; //时间间隔 span = 100 //次数 var count = 0; //随机 var random = 0; //奖品 var award = ['毛巾', '10元', '2积分', '杯子', '3元', '置物架', '5元', '满99减10'] //是否可再点击 isclick = 0(2)监听事件的定义 ①开始按钮的监听 ②八个商品格子的的监听 代码语言:javascript复制//监听 var box = document.querySelectorAll('.box') var btn = document.querySelector('.btn')(3)整体变化操作 ①点击事件:为了实现无限次抽奖及抽奖过程中无法再点击抽奖按钮,注意需要在点击开始抽奖按钮后进行部分值的重新初始化 代码语言:javascript复制//点击事件 btn.onclick = function () { if(isclick == 0){ count = 0 span = 100 random = Math.floor(Math.random()*20+30);//随机产生需要变化的次数(在30-50之间) time()//定时器函数的调用 isclick = 1//设置不可再点击 } }②定时器:实现八个格子的变化效果,每次变化后就加一次次数 代码语言:javascript复制//定时器 function time() { timer = setTimeout(function () { //清除 box[n[index]].style.backgroundImage = 'url('+arr1[n[index]]+')' //记录 index++; if(index==8){ index = 0 } //新 box[n[index]].style.backgroundImage = 'url('+arr2[n[index]]+')' //次数 count++; stop() }, span) }③停止:控制结束前变化速度的时间间隔,通过递归的方式循环定时器函数,以及最后的判断是否停止定时器,及重新设置为可再点击抽奖 代码语言:javascript复制//停止 function stop() { //当快结束的时候,八个格子的变化速度减慢 if(count>random-10){ span += 100; // console.log(span); } time() //递归 console.log(count,random); if(count == random){ clearTimeout(timer)//清除定时器 setTimeout(function(){ // console.log(award[index]); alert(award[index]);//延迟弹窗显示获得的奖品 },200) isclick = 0//设置为可再点击抽奖 } }二、完整代码展示图片及完整代码包,小伙伴们可以去博主的资源去下载🧐 注意:图片包与代码文件的相对地址 代码语言:javascript复制 Document .banner { width: 500px; height: 500px; border: 8px solid rgb(227, 205, 162); margin: auto; position: relative; } .content { width: 460px; height: 460px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .box { height: 150px; width: 150px; background-size: cover; } .box1 { background-image: url('./imgs/default/0001.png'); /* transition: 0.5s; */ } .box2 { background-image: url('./imgs/default/0002.png'); /* transition: 1s; */ } .box3 { background-image: url('./imgs/default/0003.png'); /* transition: 1.5s; */ } .box4 { background-image: url('./imgs/default/0004.png'); /* transition: 2s; */ } .btn { height: 150px; width: 150px; background-size: cover; background-image: url('./imgs/active/btn.45112134.png'); } .box5 { background-image: url('./imgs/default/0005.png'); /* transition: 2.5s; */ } .box6 { background-image: url('./imgs/default/0006.png'); /* transition: 3s; */ } .box7 { background-image: url('./imgs/default/0007.png'); /* transition: 3.5s; */ } .box8 { background-image: url('./imgs/default/0008.png'); /* transition: 4s; */ } //记录当前值 var index = 0 var arr1 = ['./imgs/default/0001.png', './imgs/default/0002.png', './imgs/default/0003.png', './imgs/default/0004.png', './imgs/default/0005.png', './imgs/default/0006.png', './imgs/default/0007.png', './imgs/default/0008.png'] var arr2 = ['./imgs/active/0001.png', './imgs/active/0002.png', './imgs/active/0003.png', './imgs/active/0004.png', './imgs/active/0005.png', './imgs/active/0006.png', './imgs/active/0007.png', './imgs/active/0008.png'] var n = [0,1,2,4,7,6,5,3] //监听 var box = document.querySelectorAll('.box') var btn = document.querySelector('.btn') //定时器 var timer; //时间间隔 span = 100 //次数 var count = 0; //随机 var random = 0; //奖品 var award = ['毛巾', '10元', '2积分', '杯子', '3元', '置物架', '5元', '满99减10'] //是否可再点击 isclick = 0 //点击 btn.onclick = function () { if(isclick == 0){ count = 0 span = 100 random = Math.floor(Math.random()*20+30); time() isclick = 1 } } //定时器 function time() { timer = setTimeout(function () { //清除 box[n[index]].style.backgroundImage = 'url('+arr1[n[index]]+')' //记录 index++; if(index==8){ index = 0 } //新 box[n[index]].style.backgroundImage = 'url('+arr2[n[index]]+')' //次数 count++; stop() }, span) } //停止 function stop() { if(count>random-10){ span += 100; // console.log(span); } time() //递归 console.log(count,random); if(count == random){ clearTimeout(timer) setTimeout(function(){ // console.log(award[index]); alert(award[index]); },200) isclick = 0 } }![]() |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |