实现一个简单的抽奖系统

---

前言

利用html，css，JavaScript来实现一个抽奖系统

---

一、先定义一个div。

上面是css内容，下面是html内容。我们设置一个背景，给了个固定定位，居中，阴影，边缘圆滑。如果不懂哪个对应哪个效果，可以把每个css都查一遍，或者F12一个一个去实验。

body{
            background: url("bg.jpg") no-repeat;
            background-size: 100%;
        }
        #box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-400px 0 0 -300px;
            width: 600px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 3em;
            text-shadow: 0 0 50px #f00;
            color:rgba(255,255,255,0.8);
            background: rgba(255,255,255,0.5);
            border-radius:10px;
            box-shadow:0 0 20px rgba(255,255,255,.5);
        }
<div id="box">
        小狗蛋
    </div>

二、JavaScript内容

1.先准备需要抽奖的人（数据），定义一个方法

如果数据的长度为0，那么就显示抽奖结束。利用随机数的方法，随机一个数组的索引，然后从数组中获取。
代码如下（示例）：

 let data = [
            "张一",
            "张二",
            "张三",
            "张四",
            "张五",
            "张六",
            "张七",
            "张八",
            "张九",
            "张十"
        ]
function extruct(){
            if(data.length == 0){
                document.getElementById('box').innerText="抽奖结束";
                return;
            }
            //获取索引
            let index = Math.floor(Math.random()*data.length);
            //获取数组中指定元素
            let lucker = data[index];
            data.splice(index,1);
            document.getElementById('box').innerText=lucker;
        }

2.实现滚动的特效

当按下enter键开始抽奖，被选中的人会被清除，然后继续抽奖，一直到所有人都抽完，抽奖结束。
代码如下（示例）：

 //标记是否开始抽奖
        let start = false;
        //定时任务标记
        var flag;
        window.onkeyup=function(e){
            //当按下回车键时执行
            if(e.keyCode === 13){
                if(start){
                    //清除指定标记的定时任务
                    clearInterval(flag);
                    //执行抽取
                    extruct();
                }else{
                    //滚动
                    flag = setInterval(function(){
                        document.getElementById('box').innerText=data[parseInt(Math.random()*data.length)];
                    },20);
                }
                //状态取反
                start = !start;
            }
        }

---

总结

随机抽奖不难，难的就是实现这些花里胡哨的效果。