Vue 随机分配的打扫卫生H5 ：打扫让我快乐

情况是这样子的，每周四是我们小组打扫卫生，一共有四件活，7个人分配。

活分别是：扫地拖地倒垃圾擦桌子

人分别是： '军', '春', '龙', '东', '贤', '磊','卿'

但是，每次打扫卫生都有人不动手，每次都是我拖地。。所以跟小组长提出，随机分配、

#需求：

　　每个人随机选择自己的工作

　　按数组排列 7个人

　　打乱顺序显示到页面即可

　　有请假需要点一下变成问号不影响随机排序

#需要的方法

　　vue

　　随机打乱数组

　　循环20次跑马灯的感觉

#美化样式

　　背景，标题，

目前页面初始和点击后的型:

页面css：

   * {

            margin:;

            padding:;

            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:;

            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>

巴特西

Vue 随机分配的打扫卫生H5 ：打扫让我快乐

最新文章

热门文章