半小时撸一个抽奖程序

需求总是很紧急，昨天正在开会收到人力需求，有时间做个抽奖吗?（now 下午四点12，年会五点开始。）还没能等我拒绝，人事又补了一句做不出来我们就不抽奖了，我擦瞬间感觉要是搞不出来会被兄弟们捅死的节奏，默默的删除了没时间做的消息，重新写了四个字名单给我。

还好去年前年都是我搞得很庆幸没被当场打脸，重启去年程序（需要收集全员头像并ps）时间显然不够，庆幸的是还有点经验，会议结束时间已经四点半了。

好了不扯淡了开始干活吧！

先屡一下思路

1、好看是好看不了了，别指望没设计没时间程序员搞出来的效果。
2、样式开始按钮、停止按钮、人员名单别列表、抽中名单列表。
3、点击开始，首先乱序名单列表保证每次抽奖列表顺序不一样，防止他们怀疑我作弊搞权重（就TM半小时哪有时间搞权重）时间紧任务重，直接用的lodash shuffle方法来乱序视图
4、随机数是肯定要有的，每隔200ms随机一个从0到人员个数（数组长度随机整数）
5、抽中人员和没抽中人员分两个数组存入localStorage，防止抽奖过程中刷新页面，纯静态不存本地那场面就尴尬了每次刷新完如果本次存储了从本地获取人员列表和中奖名单
6、点击end选中当前随机数在页面上高亮显示。

接下来看整体实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2019抽奖程序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://lib.baomitu.com/lodash.js/4.14.1/lodash.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .list-complete-item {
            transition: all 1s;
            display: inline-block;
            border: 1px solid #ccc;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center
        }
        
        .draw-bg {
            background-color: red;
            transform: scale(1.5)
        }
        
        .list-complete-enter,
        .list-complete-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
        
        .list-complete-leave-active {
            position: absolute;
        }
        
        .draw {
            height: 100px;
        }
        
        button {
            padding: 5px 10px;
            margin: 20px;
        }
        
        li {
            float: left
        }
        
        .draw-list span {
            display: inline-block;
            padding: 10px;
            background: red;
            color: #fff
        }
    </style>

</head>

<body>
    <div id="list-complete-demo" class="demo">
        <button v-on:click="start">start</button>
        <button v-on:click="end">end</button>
        <div class="draw-list">
            <span v-for="item in target">{{item}}</span>
        </div>
        <transition-group name="list-complete" tag="p">
            <span v-for="item in arrList" v-bind:key="item" class="list-complete-item" :class="{'draw-bg': item == value}">
                {{ item }}
            </span>
        </transition-group>
    </div>
    <script>
        new Vue({
            el: '#list-complete-demo',
            data: {
                arrList: [
                    "张三",
                    "李四",
                    "王五",
                    "赵六",
                    "陈七",
                    "张扒",
                    "李十四",
                    "王十五",
                    "赵十六",
                    "陈十七",
                    "张二三",
                    "李二四",
                    "王二五",
                    "赵二六",
                    "陈二七",
                    "张二扒",
                    "李三四",
                    "王三五",
                    "赵三六",
                    "陈三七"
                ],
                target: [],
                index: -1,
                timer: null,
                value: '',
                status: true
            },
            mounted() {
                if (!localStorage.getItem('initData')) {
                    localStorage.setItem('initData', JSON.stringify(this.arrList))
                } else {
                    this.arrList = JSON.parse(localStorage.getItem('initData'))
                }
                if (localStorage.getItem('drawList')) {
                    this.target = JSON.parse(localStorage.getItem('drawList'))
                }

            },
            methods: {
                start() {
                    if (this.status) {
                        if (this.index != -1) {
                            this.arrList.splice(this.index, 1)
                            localStorage.setItem('initData', JSON.stringify(this.arrList))
                        }
                        this.shuffle()
                        setTimeout(() => {
                            this.recursive()
                        }, 800)
                        this.status = !this.status
                    }
                },
                randomIndex: function() {
                    this.index = Math.floor(Math.random() * this.arrList.length)
                    return this.index
                },
                remove: function() {
                    this.arrList.splice(this.randomIndex(), 1)
                },
                shuffle: function() {
                    this.arrList = _.shuffle(this.arrList)
                },
                recursive() {
                    clearTimeout(this.timer)
                    this.timer = setTimeout(() => {
                        this.value = this.arrList[this.randomIndex()]
                        this.recursive()
                    }, 200)
                },
                end() {
                    if (this.status) {
                        return
                    }
                    clearTimeout(this.timer)
                    this.index = this.randomIndex()
                    this.value = this.arrList[this.index]
                    this.target.push(this.value)
                    localStorage.setItem('drawList', JSON.stringify(this.target))
                    this.status = !this.status
                }
            }
        })
    </script>
</body>

</html>

体验下效果
Kapture-2019-01-30-at-16.06.34.gif

需求搞定，经现场测试目前没发现什么问题！如有疑问随时回复留言！

半小时撸一个抽奖程序

先屡一下思路

我是一个前端

引用和评论

Javascript 高阶函数-after

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具