JavaScript 实现九宫格抽奖
九格宫抽奖相信大家都玩过，今天就用 JavaScript 写个九宫格抽奖玩玩。让中奖不再是梦！
1.预览效果
image
效果图为屏幕录制软件生成，以至于出现滚动不连贯。实际运行中不会出现不连贯的滚动效果
2.完整代码
代码可直接复制运行查看效果（图片记得更换）
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 实现九宫格抽奖</title><style> 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; }</style></head><body> <h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 实现九宫格抽奖</h3> <div id="container"> <ul id="list"> <!-- img标签放奖品图片 --> <!-- mask类为抽奖滚动起来的标记 --> <li><img src="images/1.png"/><div class="mask"></div></li> <li><img src="images/2.png"/><div class="mask"></div></li> <li><img src="images/3.png"/><div class="mask"></div></li> <li><img src="images/4.png"/><div class="mask"></div></li> <span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">开始抽奖</span> <li><img src="images/5.png"/><div class="mask"></div></li> <li><img src="images/6.png"/><div class="mask"></div></li> <li><img src="images/7.png"/><div class="mask"></div></li> <li><img src="images/8.png"/><div class="mask"></div></li> </ul> <div id="message"></div><!-- 获奖信息展现 --> </div></body><script type="text/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 < li.length; j++) { li[j].className = ''; } var prizenum = prize[i%li.length]; //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置 li[prizenum].className = "active"; i++; if(i<rNum-8){ //当i小于转(rNum-8次)的数量，t不变还是200毫秒 timer = setTimeout(startscroll, t);//继续执行抽奖滚动 }else if(i>= rNum-8 && i< rNum+num){ //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低 t+=(i-rNum+8)*5; timer = setTimeout(startscroll, t);//继续执行抽奖滚动 } if( i >= rNum+num){//当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); } } }</script></html>3.代码分析
1. prize
var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序数组prize中的数字就是li标签对应的索引值，因为是九宫格抽奖，因而抽奖滚动的顺序并不是按li标签的索引顺序，以下是li标签实际滚动的顺序图分析：
image
2. getrandomnum(1,9)
//抽中的奖品 返回1-9的整数，包含1，不包含9 function getrandomnum(n, m) { return parseInt((m - n) * Math.random() + n); }由于只有8个奖品，所以得到的随机整数不包含9
3. 变量 i、rounds、rNum
var i = 0; //定义一个i 用来计算抽奖跑动的总次数 var rounds = 5; //抽奖转动的圈数 var rNum = rounds*8; //标记跑动的次数（这是一个条件判断分界线）i 是用来计算li标签滚动的次数，滚动一次加1；
rounds 及 rNum 用来让滚动抽奖变慢及中止的判断条件；
4. prizenum
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 受权，转载需标明文章来源出处
image
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 实现九宫格抽奖
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 实现九宫格抽奖
