基于element-ui，vue的html随机点名器
生活随笔
收集整理的這篇文章主要介紹了
基于element-ui，vue的html随机点名器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
點擊開始點名，進入循環(huán)，點擊停止，會禁用按鈕 在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"><!-- 這里是被抽到姓名的人在這個卡片出現(xiàn) --><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; }/* 卡片內(nèi)邊距 */ .el-card__body {padding: 0; }/* 隨機點名下拉菜單 */ .randomMenu {margin-top: 10px;text-align: right; } .el-divider--horizontal{margin: 10px; }JS
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) {/* 獲取所有人的對象數(shù)組 */btnDom = $(".flexBodyName .btn");//獲取人數(shù)const number = btnDom.length - 1;//按鈕名稱改變vue.sjdmName = "點擊停止";interval = setInterval(function() {//獲得隨機數(shù)let newIndex = Math.round(Math.random() * number);//將前一次樣式置為空if (lastIndex != -1) {btnDom[lastIndex].removeAttribute("style")}//改變當(dāng)前背景色btnDom[newIndex].style.background = "red";//將新索引賦值給老的索引lastIndex = newIndex;}, 50);} else {//將按鈕置為禁用狀態(tài)vue.sjdmDisabled = true;//停止循環(huán)clearInterval(interval);//500毫秒之后運行一次， 在這里停頓一下，能看清具體選到哪里了0.setTimeout(function() {/* 刪除樣式 */// btnDom[lastIndex].removeAttribute("style");//轉(zhuǎn)為jquery對象let dom = $(btnDom[lastIndex]);//添加一個左邊距dom.css("margin-left", "10px");//將當(dāng)前對象，添加到卡片中$(".mycard").append(dom);lastIndex = -1;//按鈕名稱改變vue.sjdmName = "開始點名";//啟用按鈕vue.sjdmDisabled = false;}, 500);} } //總結(jié)
以上是生活随笔為你收集整理的基于element-ui，vue的html随机点名器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 做基金投资时，要选出一只好基金，可以看哪
- 下一篇： html5倒计时秒杀怎么做,vue 设