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="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.index
							if (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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章