JavaScript 实现九宫格抽奖

九格宫抽奖相信大家都玩过，今天就用 JavaScript 写个九宫格抽奖玩玩。让中奖不再是梦！ 1.预览效果 image 效果图为屏幕录制软件生成，以至于出现滚动不连贯。实际运行中不会出现不连贯的滚动效果 2.完整代码 代码可直接复制运行查看效果（图片记得更换）

JavaScript 实现九宫格抽奖

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

本文章由javascript技术分享原创和收集