JS实现九格宫抽奖,让中奖不再是梦!

JS实现九格宫抽奖,让中奖不再是梦!_第1张图片

九格宫抽奖相信大家都玩过,今天就用 JavaScript 写个九宫格抽奖玩玩。让中奖不再是梦!

1

预览效果

JS实现九格宫抽奖,让中奖不再是梦!_第2张图片

效果图为屏幕录制软件生成,以至于出现滚动不连贯。实际运行中不会出现不连贯的滚动效果

2

完整代码

代码可直接复制运行查看效果(图片记得更换)





JavaScript 实现九宫格抽奖


            
    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+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);             }         }     }

    3

    代码分析

    1. prize

        var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序
    

    数组prize中的数字就是li标签对应的索引值,由于是九宫格抽奖,因此抽奖滚动的顺序并不是按li标签的索引顺序,以下是li标签实际滚动的顺序图分析:

    JS实现九格宫抽奖,让中奖不再是梦!_第3张图片

    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标签索引值

    你点的每个“在看”,我都放在心里

    你可能感兴趣的:(JS实现九格宫抽奖,让中奖不再是梦!)