js分組, 实际应用

多人参加游戏, 需要随机分组, 使用程序更加便捷

效果图:

引用到的文件: 各文件都可以很方便的下载到.

js: vue.js // mui.js // jquery.js // mui.picker.js // mui.poppicker.js

css: mui.css // mui.picker.css // mui.poppicker.css // animate.css

img: add_user.png

<!doctype html>
<html><head><meta charset="utf-8"><title>開始遊戲吧!</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /><link rel="stylesheet" type="text/css" href="css/mui.picker.css" /><link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" /><link rel="stylesheet" type="text/css" href="css/animate.css" /></head><style>html,body,#app_vue{height: 100%;background-color: #FFF;}.mui-bar-nav{background-color: #8A6DE9;color: #FFF;}.mui-title{color: #FFF !important;}.mui-pull-right{color: #CF2D28;}.mui-content{background-color: #FFF;padding: 0 10px;height: 100%;overflow-x: hidden;overflow-y: auto;}.all-name{display: flex;flex-direction: row;flex-wrap: wrap;}.all-name div{padding: 3px 10px;border: 1px solid #AAAAAA;margin: 5px;border-radius: 5px;color: #555555;display: flex;align-items: center;}.how-people{text-align: right;font-size: 14px;color: #555555;padding: 5px;display: flex;justify-content: space-between;}.group{padding: 6px 0;}.group-name{font-size: 16px;padding: 3px 0;}.group-item-box{display: flex;flex-wrap: wrap;}.group-item{font-size: 14px;color: #333333;padding: 3px 6px;margin: 3px;border: 1px solid #C8C7CC;border-radius: 5px;}.add_user{width: 20px;height: 20px;}</style><body><div id="app_vue"><header class="mui-bar mui-bar-nav"><h1 class="mui-title">{{window_.title}}</h1><a class="mui-icon mui-pull-right" v-on:click="selectNum">{{selectNum_}}</a></header><div class="mui-content"><div class="all-name"><div v-bind:class="updata_.show_animate ? 'swing animated infinite' : '' " v-for="(item,index) in lists"v-bind:data-index="index" v-on:click="updata_item">{{item.name}}</div><div v-if="!updata_.show_animate" v-on:click="addUser"><img class="add_user" src="data:image/add_user.png" /></div></div><div class="how-people"><div v-on:click="updata">{{updata_.show_animate ? '編輯完畢' : '點我編輯' }}</div><div>共{{lists.length}}人</div></div><button type="button" class="mui-btn group mui-btn-purple mui-btn-block" v-on:click="isgo">開始隨機分組</button><div><div v-for="(item,index) in changeLists"><div class="group-name">第{{index + 1}}組,共{{item.length}}人</div><div class="group-item-box"><div class="group-item" v-for="(item_,index_) in item">{{item_.name}}</div></div></div></div></div></div><script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/mui.js"></script><script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script><script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var vm = new Vue({el: '#app_vue',data: {window_: {title: "喲,開始你的錶演吧"},// 主數據集lists: [{name: '111'}, {name: '222'}, {name: '333'}, {name: '444'}, {name: '555'}, {name: '666'}, {name: '777'}, {name: '888'}, {name: '999'}, {name: '100'}],//  分組數據集changeLists: [],selectNum_: 1, // 選擇的 組人數updata_: {show_animate: false, //是否顯示動畫}},created() {//初始化加載方法},methods: {/*** 開始分組* @param {Object} list 數據集* @param {Object} num 組數*/isChange: function(list, num) {var self = this;var n = list.length - 1; //获取数组下标的上限var len_ = list.length / num;var length = parseInt(n / num); //获取分组后单组的长度var list1 = JSON.parse(JSON.stringify(list)), // 轉存, 不去影響 主數據list2 = [];var f = length * num;for (var i = 0; i < num; i++) { //根据分组数，确定遍历次数var newlist = [];// 處理 余數 問題. var dd = length;if (dd < len_ && f < n + 1) {dd += 1;f++;}for (var j = 0; j < dd; j++) {var id = Math.ceil(Math.random(0, list1.length - 1) * list1.length - 1); //获取下标范围内的随机数newlist.push(list1[id]); //将获取的对象放入定义的变量数组中list1.splice(id, 1); //从数组中清除当前项}list2.push(newlist); //将变量数组放入结果组数中}self.changeLists = list2;},/*** 分組入口方法*/isgo: function() {var self = this;mui.confirm('確認將' + self.lists.length + '人,分為' + self.selectNum_ + '組?', '溫馨提示', ['再想想', '確定'], function(e) {console.log(e.index);if (e.index == 1) {self.isChange(self.lists, self.selectNum_)}}, 'div')},/*** 選擇 組數*/selectNum: function() {var self = this;var picker = new mui.PopPicker();picker.setData([{value: '1',text: '分一組'}, {value: '2',text: '分二組'}, {value: '3',text: '分三組'}, {value: '4',text: '分四組'}, {value: '5',text: '分五組'}, {value: '6',text: '分六組'}, {value: '7',text: '分七組'}, {value: '8',text: '分八組'}]);picker.show(function(selectItems) {console.log(selectItems[0].text); //智子console.log(selectItems[0].value); //zz self.selectNum_ = selectItems[0].value})},/*** 點我編輯 / 編輯完成*/updata: function() {var self = this;if (self.updata_.show_animate) {self.updata_.show_animate = false;} else {self.updata_.show_animate = true;}},/*** 點擊 item  修改項* @param {Object} e item 對象*/updata_item: function(e) {var self = this;if (self.updata_.show_animate) {console.log(e);var index = e.target.dataset.index;var lists = self.lists;var list = lists[index]console.log(list);mui.prompt(' ', list.name, '請輸入更改後的名稱', ['刪除', '確定'], function(e) {if (e.index == 1 && e.value != "") {console.log(e);list.name = e.value;self.lists[index] = list;self.error();} else if (e.index == 0) {console.log(lists);lists.splice(index, 1);self.lists = lists;self.error();}}, 'div')}},/*** 添加 item*/addUser: function() {var self = this;var lists = self.lists;mui.prompt(' ', '請輸入玩家姓名', '新增玩家', ['我再想想', '確定'], function(e) {e.indexif (e.index == 1) {if (e.value != "") {var json = {};json.name = e.value;lists.push(json)self.lists = lists;self.error();} else {mui.toast('玩家姓名為空,取消添加')}}}, 'div')},/*** lists 發生變化時 , 提示.並清除分組數據*/error: function() {var self = this;if (self.changeLists.length > 0) {mui.toast('人員出現變動, 請重新分組!')self.changeLists = [];}}}})</script></body></html>

js分組, 实际应用相关推荐

mysql 分组查询原理,MySQL分組查詢Group By實現原理詳解
由於GROUP BY 實際上也同樣會進行排序操作,而且與ORDER BY 相比,GROUP BY 主要只是多了排序之后的分組操作.當然,如果在分組的時候還使用了其他的一些聚合函數,那么還需要一些聚合函 ...
前端基础：vue.js跟node.js分别是什么
vue.js和node.js分别是什么?下面本篇文章就来给大家介绍一下vue.js和node.js,希望对大家有所帮助. Vue.js是什么? Vue.js是一款流行的JavaScript前端框架,一 ...
js.分转换成元，元转换成分
1. js 分转换成元 const regFenToYuan = (fen) =>{var num = fen;num=fen*0.01;num+='';var reg = num.indexO ...
oracle 按日输出取整数,Oracle按日周月分組統計，及next_day()函數詳解
1.概述工作中遇到如下問題:統計周期內關鍵詞數,而這里的周期內最常用的就是日周月. 日月比較容易處理,周的話可以通過next_day()函數實現. 2.實例問題如下,有一張表ljb_test,包括 ...
使用Node.js部署智能合約(Smart Contract)
從智能合約原始檔.編譯.部署,一氣呵成我想大部分的人應該都是為了寫智能合約(Smart Contract)而選擇使用Ethereum,在開發應用程式(Dapp)時,若能透過程式碼自動部署智能合約,就 ...
java中3des cbc,js與java通用的3DES(ECB,CBC)+Base64加密編碼,解碼解密
J S端加密過程: key的處理: 通過創建指定的key,key必須是16位/24位/32位其中一種,但是常用的3DES加密的key為24位,下面使用的就是24位,key的長度可以隨意指定,在轉換ke ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
[转]基于 aspnet 的自动合并输出js和css的解决方案
这是一个基于 aspnet 的自动合并输出js和css的解决方案. 首先感谢 LoveCherry 的文章<httpmodule和httphandler配合的又一应用--合并脚本样式>(h ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...

js分組, 实际应用

js分組, 实际应用相关推荐

最新文章

热门文章