elementui vue的html随机点名器软件网页版源码1.1
生活随笔
收集整理的這篇文章主要介紹了
elementui vue的html随机点名器软件网页版源码1.1
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
**在之前基礎(chǔ)上新增了點(diǎn)擊開始點(diǎn)名之后，判斷姓名池的數(shù)量的判斷，如果數(shù)量為零給出提示。
按鈕的雙擊， 如果是在姓名池，在會進(jìn)入上面的被點(diǎn)名狀態(tài)，
如果是在上面卡片中的點(diǎn)名狀態(tài)，則會重新回到姓名池
**
HTML
JS
let vue = new Vue({el: "#silence",data: {sjdmName: "開始點(diǎn)名",sjdmDisabled: false, //隨機(jī)點(diǎn)名的是否禁用names: ["張三", "李四", "趙六", "奧特曼", "灰太狼", "喜羊羊", "錢七", "小美", "小明", "四個字的", "王五", "王五","張三", "李四", "趙六", "奧特曼", "灰太狼", "喜羊羊", "錢七", "小美", "小明", "四個字的", "王五", "王五","張三", "李四", "趙六", "奧特曼", "灰太狼", "喜羊羊", "錢七", "小美", "小明", "四個字的", "王五", "王五"]},methods: {/* 開始點(diǎn)名事件被單擊 */clickSjdmBtn() {random();},//外部調(diào)用的提示消息的方法message(str) {this.$message({message: str,type: 'warning'});}} });flag = false; //隨機(jī)點(diǎn)名 let lastIndex = -1; //舊索引 function random() {/* 獲取所有人的對象數(shù)組 */btnDom = $(".flexBodyName .btn");//判斷姓名池，是否有人if (btnDom.length == 0) {vue.message("點(diǎn)名池主體 數(shù)量為零 無法點(diǎn)名");return;}flag = !flag;if (flag) {//獲取人數(shù)const number = btnDom.length - 1;//按鈕名稱改變vue.sjdmName = "點(diǎn)擊停止";//開始點(diǎn)名，每50毫秒運(yùn)行一次interval = setInterval(function() {//獲得隨機(jī)數(shù)let newIndex = Math.round(Math.random() * number);//將前一次樣式置為空if (lastIndex != -1) {//刪除選中狀態(tài)$(btnDom[lastIndex]).removeClass("btnRunntime");}//添加css樣式 ，為選中狀態(tài)$(btnDom[newIndex]).addClass("btnRunntime")//將新索引賦值給老的索引lastIndex = newIndex;}, 50);} else {//將按鈕置為禁用狀態(tài)vue.sjdmDisabled = true;//停止循環(huán)clearInterval(interval);//500毫秒之后運(yùn)行一次， 在這里停頓一下，能看清具體選到哪里了0.setTimeout(function() {//將btn對象的父元素div 轉(zhuǎn)為jquery對象let dom = $(btnDom[lastIndex].parentElement);//添加一個左邊距dom.css("margin-left", "10px");//將當(dāng)前btn 對象的父元素，div，添加到卡片中$(".mycard").append(dom);lastIndex = -1;//按鈕名稱改變vue.sjdmName = "開始點(diǎn)名";//啟用按鈕vue.sjdmDisabled = false;}, 500);} }/* 姓名按鈕雙擊事件如果在姓名主體，則會移動到上面被點(diǎn)名的狀態(tài)如果是在上面被點(diǎn)名的狀態(tài)，則移出。移動到主體*/ $(".btn").on("dblclick", function() {//使用js語法 獲取父元素的父元素let parentDom = this.parentElement.parentElement;//使用jquery獲取id屬性let idName = $(parentDom).prop("id");//獲取包裹button 的div jquery對象let divBtn = $(this.parentElement);// 如果在姓名主體，則會移動到上面被點(diǎn)名的狀態(tài)if (idName == "mycard") {//將被選中狀態(tài)， 移到主體//刪除被選中樣式的 背景色class 和左邊距divBtn.css("margin-left", "0");$(this).removeClass("btnRunntime");//添加到主體$(".flexBodyName").append(divBtn);}// 如果在姓名主體，則會移動到上面被點(diǎn)名的狀態(tài)if (idName == "flexBodyName") {//將姓名主體添加到 被選中狀態(tài)divBtn.css("margin-left", "10px");/*添加一個被選中的css樣式 */$(this).addClass("btnRunntime");//添加到被點(diǎn)中的，卡片池$(".mycard").append(divBtn);}});CSS
body {/* background-color: #C2E7B0; */background-color: #F0F9EB; }/* 點(diǎn)名器主面板 */ .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; }/*被點(diǎn)到的人的按鈕，在care卡片的顏色 */ .btnRunntime {background-color: red; }/* 按鈕自帶的左邊距取消 */ .el-button+.el-button {margin-left: initial; }/*卡片 被點(diǎn)中明的池*/ .mycard {background-color: ##A0CFFF;display: flex;justify-content: left;flex-wrap: wrap; }/* 卡片內(nèi)邊距 */ .el-card__body {padding: 0; }/* 隨機(jī)點(diǎn)名下拉菜單 */ .randomMenu {margin-top: 10px;text-align: right; }.el-divider--horizontal {margin: 10px; }總結(jié)
以上是生活随笔為你收集整理的elementui vue的html随机点名器软件网页版源码1.1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 星纪时代战略投资魅族 李书福：未来汽车、
- 下一篇： 系列史上首次！小米手环7 Pro终于内置