情况是这样子的,每周四是我们小组打扫卫生,一共有四件活,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 :打扫让我快乐的更多相关文章

  1. DP经典 BZOJ 1584: [Usaco2009 Mar]Cleaning Up 打扫卫生

    BZOJ 1584: [Usaco2009 Mar]Cleaning Up 打扫卫生 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 419  Solve ...

  2. BZOJ_1584_[Usaco2009 Mar]Cleaning Up 打扫卫生_DP

    BZOJ_1584_[Usaco2009 Mar]Cleaning Up 打扫卫生_DP Description 有N头奶牛,每头那牛都有一个标号Pi,1 <= Pi <= M <= ...

  3. bzoj1584 9.20考试 cleaning up 打扫卫生

    1584: [Usaco2009 Mar]Cleaning Up 打扫卫生 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 549  Solved: 38 ...

  4. 10.12 csp-s模拟测试70 木板+打扫卫生+骆驼

    T1 木板 求$[\sqrt{n},n)$间有多少个数的平方是n的倍数 通过打表可以发现(我没带脑子我看不出来),符合条件的数构成一个等差数列,公差为首项 而首项就是将n质因数分解后每个质因数出现次数 ...

  5. 「10.12」木板(数学)·打扫卫生(神仙DP)

    A. 木板 一个很简单的数学题,简单推一下就好,路丽姐姐教你学数学. 将式子化出我们发现只需求出$i\times i/n$的个数 那么我们将$n$质因数分解,可知因子个数 为了整除$n$,令$i==\ ...

  6. BZOJ1584 [Usaco2009 Mar]Cleaning Up 打扫卫生

    令$f[i]$表示以i为结尾的答案最小值,则$f[i] = min \{f[j] + cnt[j + 1][i]^2\}_{1 \leq j < i}$,其中$cnt[j + 1][i]$表示$ ...

  7. BZOJ 1584 打扫卫生

    好题! 本来想用一般的方法瞎搞个线段树什么的...发现不行... 然后翻题解. 注意到最优答案不会超过n,所以维护b[]数组,b[j]表示b[j]+1.....i有j个不同的数. 复杂度n√n. #i ...

  8. bzoj:1584: [Usaco2009 Mar]Cleaning Up 打扫卫生

    Description 有N头奶牛,每头那牛都有一个标号Pi,1 <= Pi <= M <= N <= 40000.现在Farmer John要把这些奶牛分成若干段,定义每段的 ...

  9. [bzoj1587] [Usaco2009 Mar]Cleaning Up 打扫卫生

    首先(看题解)可得...分成的任意一段中的不同颜色个数都<=根号n...不然的话直接分成n段会更优= = 然后就好做多了.. 先预处理出对于每头牛i,和它颜色相同的前一头和后一头牛的位置. 假设 ...

随机推荐

  1. Keras的一些功能函数

    摘自: https://www.cnblogs.com/Anita9002/p/8136357.html 1.模型的信息提取 # 节点信息提取 config = model.get_config() ...

  2. svn 解决冲突

    当svn update时提示如下: D C main.go > local file unversioned, incoming file add upon updateSummary of c ...

  3. redis集群篇

    redis集群的搭建 1.为什么要搭建集群(解决单点问题) 通过对redis的简单了解,我们知道redis已经有两种持久化方案rdb和aof.在redis出现宕机后,可能会出现部分的数据损失,但是数据 ...

  4. Maven - 本地仓库(.m2) vs. 远程仓库(联网)

    转载自:https://www.cnblogs.com/shuaiandjun/p/7604619.html 什么是Maven仓库在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下, ...

  5. Java基础13-字符串缓冲流;字节流

    作业解析 描述HashMap内部实现原理 HashMap是一种存储机制,存储的是key-value对,key用来保证元素的唯一性.通过hash算法将要存储的对象打散,分布在不同的区间中. 当添加对象时 ...

  6. springboot启动流程

    @EnableDiscoveryClient @SpringBootApplication public class ProducerApplication { public static void ...

  7. Webpack自动化工程

    近几年,前端各种框架工具层出不穷,从两三年前还是一个jQuery搞定全站,到之后requirejs/seajs,node,gulp/webpack,Angular/React/Vue,RN/weex的 ...

  8. python学习:一

    第三章:实践题作业 1.编写一个名为 collatz()的函数,它有一个名为 number 的参数.如果参数是偶数,那么 collatz()就打印出 number // 2, 并返回该值.如果 num ...

  9. C# Emgu 类型转换

    Bitmap: Bitmap位图文件,是Windows标准格式,也是.Net主要的图像存储格式. Bitmap类以System.Drawing为命名空间,继承抽象类Image,同时里面封装了非常多对图 ...

  10. 编译php-5.3.28

    1. 下载php-5.3.28 2. 编译/安装 ./configure --prefix=/usr/local/php --enable-fpm --enable-maintainer-zts -- ...