Vue 隨機分配的打掃衛生H5 ：打掃讓我快樂

情況是這樣子的，每周四是我們小組打掃衛生，一共有四件活，7個人分配。

活分別是：掃地拖地倒垃圾擦桌子

人分別是： '軍', '春', '龍', '東', '賢', '磊','卿'

但是，每次打掃衛生都有人不動手，每次都是我拖地。。所以跟小組長提出，隨機分配、

#需求：

　　每個人隨機選擇自己的工作

　　按數組排列 7個人

　　打亂順序顯示到頁面即可

　　有請假需要點一下變成問號不影響隨機排序

#需要的方法

　　vue

　　隨機打亂數組

　　循環20次跑馬燈的感覺

#美化樣式

　　背景，標題，

目前頁面初始和點擊后的型:

頁面css：

   * {
            margin: 0;
            padding: 0;
            text-shadow: 0px 0px 12px rgba(150, 122, 122, 0.8);
        }
        #app{
            width: 100vw;
            height: 100vh;
            background-size: cover;
        }
        body{
            background:
                    radial-gradient(black 15%, transparent 16%) 0 0,
                    radial-gradient(black 15%, transparent 16%) 8px 8px,
                    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
                    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
            background-color:#282828;
            background-size:16px 16px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
            background-color: #cc2323;
            line-height: 30px;
            color: #fff;
            border-radius: 3px;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8);
            overflow: hidden;
        }

        ul,
        li {
            list-style: none;

        }

        ul {
            width: 80%;
            display: flex;
            flex-direction: row;
            align-self: center;
            justify-content: space-between;
            margin: 0 10%;
            padding: 25px 0 30px;

        }

        h2 {
            text-align: center;
            font-weight: 500;
            padding: 50px 0;
            color: #eeeeee;
            letter-spacing: 8px;
        }

        p {
            width: 80%;
            margin: 0 10%;
            font: 16px sans-serif;
            color: #eeeeee;
        }

        button {
            border: none;
            position: relative;
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-left: 14px;
            padding-right: 14px;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            color: #ffffff;
            line-height: 2.55555556;
            border-radius: 3px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            overflow: hidden;
            background-color: #cc2323;
            margin: 50px auto;
            box-shadow: 2px 2px 19px rgb(0, 0, 0);
        }

        .thing {
            display: flex;
            width: 80%;
            margin: 10px 10%;
            padding: 20px 0;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            border-radius: 3px;
            background-color: #cc2323;
            color: wheat;
            box-shadow: 1px 1px 12px rgb(0, 0, 0);
            opacity: 0.9;
        }

        .b-shadow {
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8);
        }

頁面結構：

    <div id="app">
        <img style="width: 100vw;height: auto" src="header.png" alt="">
        <p>
            點擊男嘉賓即可請假：
        </p>
        <ul>
            <li v-for="(item,index) in person" @click="change(index)">
                <span>{{item}}</span>
            </li>
        </ul>
        <div class="thing">
            昆侖拖地把:<span>{{randomPerson[0]}}</span>+<span>{{randomPerson[1]}}</span>

        </div>
        <div class="thing">
            少林掃地僧:<span>{{randomPerson[2]}}</span>+<span>{{randomPerson[3]}}</span>
        </div>
        <div class="thing">
            華山垃圾車:<span>{{randomPerson[4]}}</span>+<span>{{randomPerson[5]}}</span>
        </div>
        <div class="thing">
            武當擦桌子:<span>{{randomPerson[6]}}</span>
        </div>

        <button class="" @click="alert" value="">開始搖滾</button>
    </div>

JavaScript:

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                person: [
                    '軍', '春', '龍', '東', '賢', '磊','卿'
                ],
                randomPerson: ['?', '?', '?', '?', '?', '?','?'],
                time: 20 //跑馬跳動20次
            },
            methods: {
                alert: function () {
                    this.randomPerson = this.person;
                    let arr = this.randomPerson;
                    let time = this.time；

                    function shuffle(arr) {//數組隨機方法
                        arr.sort(function () {
                            return Math.random() - 0.5;
                        });
                    }

                    for (let i = 0; i < time; i++) {
                        setTimeout(function () {
                            shuffle(arr);//執行數組隨機
                        }, i * 100);
                        this.randomPerson = arr;
                    }

                },
                change: function (index) {
                    console.log(index);
                    this.person.splice(index, 1, '?');//請假的操作
                }
            }

        })
    </script>

posted @ 2018-11-23 10:49 徐大春閱讀(561) 評論(0) 收藏舉報

刷新頁面返回頂部

徐大春的博客

QQ:625078045

Vue 隨機分配的打掃衛生H5 ：打掃讓我快樂

公告