基于element-ui，vue的html随机点名器

在这里插入图片描述

点击开始点名，进入循环，点击停止，会禁用按钮在500毫秒之后，将点到的人名字放到上面，在下面表体会消失这个人，
点名之后可以刷新。暂时还没有做将点到的人还回来。（1.0）

用到的资料，element-ui， vue javascript jquery。需要引入ecelemtn-ui， vue ， jquery。

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../Vue.jsv2.6.12.js" type="text/javascript" charset="utf-8"></script><script src="../element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../element-ui/lib/theme-chalk/index.css" /><link rel="stylesheet" type="text/css" href="../css/silence.css" /><script src="../jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="silence"><!-- 这里是被抽到姓名的人在这个卡片出现 --><el-card shadow="always" class="mycard"> </el-card><!-- 随机点名 --><div class="randomMenu"><el-button type="success" :disabled="sjdmDisabled" @click="clickSjdmBtn">{{sjdmName}}</el-button></div><!-- 横切线 --><el-divider content-position="right"></el-divider><!-- 姓名body体 --><div shadow="always" class="flexBodyName"><div v-for="name in names"><el-button class="btn" @click="dblBtnName"  type="success">{{name}}</el-button></div></div></div></body><script src="../js/silence.js" type="text/javascript" charset="utf-8"></script>
</html>

CSS

body {/* background-color: #C2E7B0; */background-color: #F0F9EB;
}/* 点名器主面板 */
.flexBodyName {width: 70%;margin: auto;background-color: ##A0CFFF;padding: 10px;/* flex 布局 */display: flex;justify-content: space-around;flex-wrap: wrap;/* 边框阴影 */box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)/*居中margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); */}/* 姓名按钮 */
.btn {margin-top: 6px;margin-bottom: 6px;width: 90px;height: 50px;background-color: #F0C78A;
}/* 按钮左边距取消 */
.el-button+.el-button {margin-left: initial;
}/*卡片 */
.mycard {background-color: ##A0CFFF;
}/* 卡片内边距 */
.el-card__body {padding: 0;
}/* 随机点名下拉菜单 */
.randomMenu {margin-top: 10px;text-align: right;
}
.el-divider--horizontal{margin: 10px;
}

let vue = new Vue({el: "#silence",data: {sjdmName: "开始点名",sjdmDisabled: false, //随机点名的是否禁用names: ["张三", "李四", "赵六", "奥特曼", "灰太狼", "喜羊羊", "钱七", "小美", "小明", "四个字的", "王五", "王五","张三", "李四", "赵六", "奥特曼", "灰太狼", "喜羊羊", "钱七", "小美", "小明", "四个字的", "王五", "王五","张三", "李四", "赵六", "奥特曼", "灰太狼", "喜羊羊", "钱七", "小美", "小明", "四个字的", "王五", "王五"]},methods: {/* 开始点名事件被单击 */clickSjdmBtn() {random();},dblBtnName() {console.log("dddd")}}
});flag = false; //随机点名
let lastIndex = -1; //旧索引
function random() {flag = !flag;if (flag) {/* 获取所有人的对象数组 */btnDom = $(".flexBodyName .btn");//获取人数const number = btnDom.length - 1;//按钮名称改变vue.sjdmName = "点击停止";interval = setInterval(function() {//获得随机数let newIndex = Math.round(Math.random() * number);//将前一次样式置为空if (lastIndex != -1) {btnDom[lastIndex].removeAttribute("style")}//改变当前背景色btnDom[newIndex].style.background = "red";//将新索引赋值给老的索引lastIndex = newIndex;}, 50);} else {//将按钮置为禁用状态vue.sjdmDisabled = true;//停止循环clearInterval(interval);//500毫秒之后运行一次， 在这里停顿一下，能看清具体选到哪里了0.setTimeout(function() {/* 删除样式 */// 	btnDom[lastIndex].removeAttribute("style");//转为jquery对象let dom = $(btnDom[lastIndex]);//添加一个左边距dom.css("margin-left", "10px");//将当前对象，添加到卡片中$(".mycard").append(dom);lastIndex = -1;//按钮名称改变vue.sjdmName = "开始点名";//启用按钮vue.sjdmDisabled = false;}, 500);}
}
//