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
发表评论 (审核通过后显示评论)：