js分組, 实际应用

傷城~ 2023-06-23 08:58 2阅读 0赞

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

效果图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODAyMjk4_size_16_color_FFFFFF_t_70][]

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

** 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:     ![20191218120446697.png][]**     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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODAyMjk4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218120636758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODAyMjk4,size_16,color_FFFFFF,t_70
[20191218120446697.png]: https://img-blog.csdnimg.cn/20191218120446697.png