半小時擼一個抽獎程序

時間 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

需求搞定，經現場測試目前沒發現什麼問題！若有疑問隨時回覆留言！測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。