手机随机数字抽奖器_JavaScript 实现九宫格抽奖

最新推荐文章于 2024-05-03 04:32:14 发布

weixin_39846191

最新推荐文章于 2024-05-03 04:32:14 发布

阅读量983

点赞数

文章标签：手机随机数字抽奖器

本文链接：https://blog.csdn.net/weixin_39846191/article/details/111281234

版权

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

1预览效果

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

2完整代码

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

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">
            
            
            <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，不包含9function 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[j].className = '';
            }var prizenum = prize[i%li.length];  //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
            li[prizenum].className = "active";
            i++;if(i-8){  //当i小于转(rNum-8次)的数量，t不变还是200毫秒
                timer = setTimeout(startscroll, t);//继续执行抽奖滚动
            }else if(i>= rNum-8 && i                //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标签实际滚动的顺序图分析：

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

END

我就知道你“在看”

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

weixin_39846191

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机随机数字抽奖器_JavaScript 实现九宫格抽奖

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

扫一扫