日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > vue >内容正文

vue

elementui vue的html随机点名器软件网页版源码1.1

發布時間：2023/12/10 vue 85 豆豆
生活随笔 收集整理的這篇文章主要介紹了 elementui vue的html随机点名器软件网页版源码1.1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.



**在之前基礎上新增了點擊開始點名之后，判斷姓名池的數量的判斷，如果數量為零給出提示。
按鈕的雙擊， 如果是在姓名池，在會進入上面的被點名狀態，
如果是在上面卡片中的點名狀態，則會重新回到姓名池
**
HTML

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="js/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="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="silence"><!-- 這里是被抽到姓名的人在這個卡片出現 --><el-card shadow="always" id="mycard" 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" id="flexBodyName"><div v-for="name in names"><!-- btn被綁定了雙擊事件 --><el-button class="btn" type="success">{{name}}</el-button></div></div></div></body><script src="js/silence.js" type="text/javascript" charset="utf-8"></script> </html>

JS

let vue = new Vue({el: "#silence",data: {sjdmName: "開始點名",sjdmDisabled: false, //隨機點名的是否禁用names: ["張三", "李四", "趙六", "奧特曼", "灰太狼", "喜羊羊", "錢七", "小美", "小明", "四個字的", "王五", "王五","張三", "李四", "趙六", "奧特曼", "灰太狼", "喜羊羊", "錢七", "小美", "小明", "四個字的", "王五", "王五","張三", "李四", "趙六", "奧特曼", "灰太狼", "喜羊羊", "錢七", "小美", "小明", "四個字的", "王五", "王五"]},methods: {/* 開始點名事件被單擊 */clickSjdmBtn() {random();},//外部調用的提示消息的方法message(str) {this.$message({message: str,type: 'warning'});}} });flag = false; //隨機點名 let lastIndex = -1; //舊索引 function random() {/* 獲取所有人的對象數組 */btnDom = $(".flexBodyName .btn");//判斷姓名池，是否有人if (btnDom.length == 0) {vue.message("點名池主體 數量為零 無法點名");return;}flag = !flag;if (flag) {//獲取人數const number = btnDom.length - 1;//按鈕名稱改變vue.sjdmName = "點擊停止";//開始點名，每50毫秒運行一次interval = setInterval(function() {//獲得隨機數let newIndex = Math.round(Math.random() * number);//將前一次樣式置為空if (lastIndex != -1) {//刪除選中狀態$(btnDom[lastIndex]).removeClass("btnRunntime");}//添加css樣式 ，為選中狀態$(btnDom[newIndex]).addClass("btnRunntime")//將新索引賦值給老的索引lastIndex = newIndex;}, 50);} else {//將按鈕置為禁用狀態vue.sjdmDisabled = true;//停止循環clearInterval(interval);//500毫秒之后運行一次， 在這里停頓一下，能看清具體選到哪里了0.setTimeout(function() {//將btn對象的父元素div 轉為jquery對象let dom = $(btnDom[lastIndex].parentElement);//添加一個左邊距dom.css("margin-left", "10px");//將當前btn 對象的父元素，div，添加到卡片中$(".mycard").append(dom);lastIndex = -1;//按鈕名稱改變vue.sjdmName = "開始點名";//啟用按鈕vue.sjdmDisabled = false;}, 500);} }/* 姓名按鈕雙擊事件如果在姓名主體，則會移動到上面被點名的狀態如果是在上面被點名的狀態，則移出。移動到主體*/ $(".btn").on("dblclick", function() {//使用js語法 獲取父元素的父元素let parentDom = this.parentElement.parentElement;//使用jquery獲取id屬性let idName = $(parentDom).prop("id");//獲取包裹button 的div jquery對象let divBtn = $(this.parentElement);// 如果在姓名主體，則會移動到上面被點名的狀態if (idName == "mycard") {//將被選中狀態， 移到主體//刪除被選中樣式的 背景色class 和左邊距divBtn.css("margin-left", "0");$(this).removeClass("btnRunntime");//添加到主體$(".flexBodyName").append(divBtn);}// 如果在姓名主體，則會移動到上面被點名的狀態if (idName == "flexBodyName") {//將姓名主體添加到 被選中狀態divBtn.css("margin-left", "10px");/*添加一個被選中的css樣式 */$(this).addClass("btnRunntime");//添加到被點中的，卡片池$(".mycard").append(divBtn);}});

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; }/*被點到的人的按鈕，在care卡片的顏色 */ .btnRunntime {background-color: red; }/* 按鈕自帶的左邊距取消 */ .el-button+.el-button {margin-left: initial; }/*卡片 被點中明的池*/ .mycard {background-color: ##A0CFFF;display: flex;justify-content: left;flex-wrap: wrap; }/* 卡片內邊距 */ .el-card__body {padding: 0; }/* 隨機點名下拉菜單 */ .randomMenu {margin-top: 10px;text-align: right; }.el-divider--horizontal {margin: 10px; }

總結

以上是生活随笔為你收集整理的elementui vue的html随机点名器软件网页版源码1.1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。