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>