年会抽奖活动-随机抽

效果图：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>.container {display: flex;flex-wrap: wrap;}.list-complete-item {display: flex;justify-content: center;align-items: center;width: 100px;height: 100px;border: 1px solid gray;transition: all 0.5s;}.draw-bg {/* width: 150px;height: 150px; */border: 1px solid red;background-color: salmon;}h1 {display: inline-flex;}.lucky-body {border: 1px solid red;background-color: salmon;color: white;margin-right: 24px;padding: 0 10px;}[v-cloak] {display: none;}</style>
</head><body><div id="list-complete-demo" class="demo" v-cloak><el-button type="primary" v-on:click="start">开始抽奖</el-button><el-button type="primary" v-on:click="end">停</el-button><el-button type="warning" v-on:click="clear">清零重新开始</el-button><div class="draw-list"><h1>抽中的同学：<h1 class="lucky-body" v-for="item in target">{{item}}</h1></h1></div><h2>班级同学：</h2><transition-group class="container"><span v-for="item in arrList" v-bind:key="item" class="list-complete-item" :class="{'draw-bg': item == value}">{{ item }}</span></transition-group></div><!-- import Vue before Element --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 引入组件库 --><script src="https://lib.baomitu.com/lodash.js/4.14.1/lodash.min.js"></script><script>// 学生成员let initData = ["张三","李四","王五","赵六","陈七","张扒","李十四","王十五","赵十六","陈十七","张二三","李二四","王二五","赵二六","陈二七","张二扒","李三四","王三五","赵三六","陈三七"]new Vue({el: '#list-complete-demo',data: {arrList: JSON.parse(JSON.stringify(initData)),target: [],//中奖名单index: -1,//当前随机索引timer: null,//定义一个定时器value: '',//当前人员名status: true//当前抽奖状态},beforeDestroy() {clearTimeout(this.timer)},methods: {start() {if (this.status) {// 每次开始打乱顺序// this.shuffle()setTimeout(() => {this.recursive()}, 400)this.status = false}},// 获取随机数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)this.status = truesetTimeout(() => {this.arrList.splice(this.index, 1)}, 1500)},// 清零重新开始clear() {this.status = trueclearTimeout(this.timer)this.target = []this.arrList = JSON.parse(JSON.stringify(initData))this.value = -1this.shuffle()}}})</script></body></html>

年会抽奖活动-随机抽相关推荐

从10W个数中随机抽走2个数，求出那两个数是多少
这道题目是从51js论坛上看到的,链接在这里>> 题目大意是: 从1到10w(共10w个数)中随机抽走2个数,然后打乱剩下的数的顺序,问如果从这剩下的数中快速的找出抽走的是哪2个数? 我想 ...
java随机抽题系统_在用java做一个在线考试系统，随机抽题遇到了问题，我写了一个随机抽题的方法，不知道在asp按钮中怎么用...
你们看看方法对不对?publicListsuiji(intshitiId,inttimuId,inttimunanyidu,StringtimuLeixing){Stringsql="fro ...
java随机抽题系统_为什么要使用考试系统的随机组卷功能？
一个考试系统的组卷灵活性,不仅仅在于其题型丰富.设置参数齐全,也在于抽题组卷方式.除了平时我们严肃性的固定题目出卷方式,我们往往也考虑到需要随机组卷的功能. 为什么用户会需要随机组卷的功能呢?随机组卷 ...
Bootstrap公司年会抽奖活动代码
介绍: Bootstrap公司年会抽奖活动代码基于Bootstrap3.3.4制作,响应式设计,自适应分辨率,兼容PC端和移动端,自定义主题,有添加抽奖名单功能. 网盘下载地址: http://kek ...
java随机抽题系统_什么样的考试场景需要使用随机试卷模式？
我们在进行组卷时,比较常用的组卷模式有随机试卷.手工固定试卷.抽题组卷等. 今天我们讲解如何使用优考试在线考试系统设计随机试卷,随机试卷适用于什么样的考试场景? 一. 试题多样化当试题较多,但试卷总 ...
java随机抽题系统_2020税务师机考模拟系统全新上线，智能题库随机组卷，快来试手...
2020年税务师考试实行闭卷机考,提升机考答题能力很有必要.提前练习.熟悉机考系统,可以加快答题速度,多出来的时间,可以去思考题目或者多检查一遍,都好过把时间浪费在打字慢.计算器不习惯.公式输入不熟练 ...
用python实现纸牌游戏的随机抽牌洗牌过程（item系列几个内置方法的实例）
1.namedtuple:命名元组,可以创建一个没有方法只有属性的类 from collections import namedtuple card = namedtuple('card',['ran ...
红包分配：指定金额指定上下限后随机分发成若干个红包，随机抽
公司最近策划一个红包活动,指定金额指定上下限后随机分发成若干个红包,以抽奖机制抽给员工.拿到这活,首先想到的当然是度娘哈,偷师学艺之后,初步进行代码实现,下面讲述下原理. 主要分两步:红包随机分割和随 ...
基于Python pyqt5的随机抽号机源代码，可设置抽号器的人数及刷新间隔
基于Python pyqt5的随机抽号机源代码 ,可设置抽号器的人数及刷新间隔,直接运行main.py即可完整代码下载地址: pyqt5的随机抽号机源代码 main.py import sys fr ...

年会抽奖活动-随机抽

效果图：

代码：

年会抽奖活动-随机抽相关推荐

最新文章

热门文章