半小时撸一个抽奖程序

时间 2019-11-06

标签半小时一个抽奖程序繁體版

原文原文链接

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

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

好了不扯淡了开始干活吧！程序员

先屡一下思路

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

接下来看总体实现代码数组

<!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>

体验下效果
dom

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