原生js实现九宫格抽奖 |
您所在的位置：网站首页 › 九宫格抽奖小程序 › 原生js实现九宫格抽奖 |
原生js实现九宫格抽奖
|
预览效果
留意注释文字的解释。记得更换图片。 JavaScript 实现九宫格抽奖 body{ background-color: #2c9afc; } #container { width: 330px; height: 340px; margin: 10% auto; border: 7px solid #99d4ff; border-radius: 10px; padding: 2%; } #list { width: 330px; height: 340px; list-style: none; margin: 0; padding: 0; } #list li, #list span { width: 100px; height: 100px; float: left; text-align: center; line-height: 100px; position: relative; background-color: #384f9a; margin: 1.4%; border-radius: 5px; } #list li img{ display: block; width: 100%; height: 100%; } #list li .mask{ width: 100%; height: 100%; position: absolute; left:0; top:0; background: url(images/mask.png) no-repeat; background-size: cover; display: none; } #list span:hover { cursor: pointer; color: orange; font-size: 18px; } #list .active .mask{ display: block; } #message { line-height: 32px; color: #9a9a9a; text-align: center; position:absolute; left: 50%; top: 50px; width: 300px; height: 50px; margin-left: -150px; display: none; background: #000; color: #fff; } JavaScript 实现九宫格抽奖 开始抽奖 var container = document.getElementById('container'), li = container.getElementsByTagName('li'), span = document.getElementById('startbutton'), message = document.getElementById('message'), timer = null; bReady = true;//定义一个抽奖开关 var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序 var num = 0;//num用来存放得到的随机函数，也就是抽中的奖品 //开始抽奖 function startlottery(){ if(bReady) {//当抽奖开关为true的时候，可点击抽奖 message.style.display="none";//将获奖信息div隐藏（以防止上次抽奖信息还显示） span.style.background="#ada7a8"; bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖 num = getrandomnum(1,9)//得到一个随机数（即奖品） // console.log(num) startinit(num);//执行抽奖初始化 } } //抽中的奖品 返回1-9的整数，包含1，不包含9 function getrandomnum(n, m) { return parseInt((m - n) * Math.random() + n); } //抽奖初始化 function startinit(num) { var i = 0; //定义一个i 用来计算抽奖跑动的总次数 var t =200; //抽奖跑动的速度 初始为200毫秒 var rounds = 5; //抽奖转动的圈数 var rNum = rounds*8; //标记跑动的次数（这是一个条件判断分界线） timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数 //抽奖滚动的函数 function startscroll() { //每次滚动抽奖将所有li的class都设为空 for(var j = 0; j //当i小于转(rNum-8次)的数量，t不变还是200毫秒 timer = setTimeout(startscroll, t);//继续执行抽奖滚动 }else if(i>= rNum-8 && i//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息 if (num==1) { message.innerHTML="恭喜你中了耳机"; }else if(num==2){ message.innerHTML="恭喜你中了iPad"; }else if(num==3){ message.innerHTML="感谢参与"; }else if(num==4){ message.innerHTML="恭喜你中了洋娃娃"; }else if(num==5){ message.innerHTML="恭喜你中了红色鞋子"; }else if(num==6){ message.innerHTML="恭喜你中了白色手机"; }else if(num==7){ message.innerHTML="恭喜你中了黑色手机"; }else if(num==8){ message.innerHTML="恭喜你中了蓝色鞋子"; } var timer2 = null; timer2 = setTimeout(function(){ message.style.display="block";//奖品展示的信息为显示状态 span.style.background="#ff3a59"; clearTimeout(timer2); },1000); bReady = true;//当计时器结束后让span标签变为抽奖状态 clearTimeout(timer); } } } 代码分析 prize var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序数组prize中的数字就是li标签对应的索引值，由于是九宫格抽奖，因此抽奖滚动的顺序并不是按li标签的索引顺序，以下是li标签实际滚动的顺序图分析： 因为只有8个奖品，所以得到的随机整数不包含9 变量 i、rounds、rNum //抽中的奖品 返回1-9的整数，包含1，不包含9 var i = 0; //定义一个i 用来计算抽奖跑动的总次数 var rounds = 5; //抽奖转动的圈数 var rNum = rounds*8; //标记跑动的次数（这是一个条件判断分界线）i 是用来计算li标签滚动的次数，滚动一次加1； rounds 及 rNum 用来让滚动抽奖变慢及停止的判断条件； prizenum //抽中的奖品 返回1-9的整数，包含1，不包含9 var prizenum = prize[i%li.length]; //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置 li[prizenum].className = "active";i%li.length 为i除以li标签长度得到的余数(始终为0-7范围的整数)，放进prize数组中，得到的prizenum数字就是当前滚动到的li标签索引值 本文来源于微信GitWeb的文章 |
【本文地址】