js分組, 实际应用

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

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

效果图:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODAyMjk4_size_16_color_FFFFFF_t_70

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

  1. ** js: **  vue.js //  mui.js // jquery.js // mui.picker.js // mui.poppicker.js
  3.  **css:  **mui.css  //  mui.picker.css // mui.poppicker.css // animate.css
  5.  **img:     ![20191218120446697.png][]**     add\_user.png
  9. <!doctype html>
  10. <html>
  12.     <head>
  13.         <meta charset="utf-8">
  14.         <title>開始遊戲吧!</title>
  15.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  16.         <link href="css/mui.css" rel="stylesheet" />
  17.         <link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
  18.         <link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
  19.         <link rel="stylesheet" type="text/css" href="css/animate.css" />
  20.     </head>
  21.     <style>
  22.         html,body,#app_vue{
  23.             height: 100%;
  24.             background-color: #FFF;
  25.         }
  27.         .mui-bar-nav{
  28.             background-color: #8A6DE9;
  29.             color: #FFF;
  30.         }
  31.         .mui-title{
  32.             color: #FFF !important;
  33.         }
  34.         .mui-pull-right{
  35.                 color: #CF2D28;
  36.         }
  37.         .mui-content{
  38.             background-color: #FFF;
  39.             padding: 0 10px;
  40.             height: 100%;
  41.             overflow-x: hidden;
  42.             overflow-y: auto;
  43.         }
  44.         .all-name{
  45.             display: flex;
  46.             flex-direction: row;
  47.             flex-wrap: wrap;
  48.         }
  50.         .all-name div{
  51.             padding: 3px 10px;
  52.             border: 1px solid #AAAAAA;
  53.             margin: 5px;
  54.             border-radius: 5px;
  55.             color: #555555;
  56.             display: flex;
  57.             align-items: center;
  58.         }
  60.         .how-people{
  61.             text-align: right;
  62.             font-size: 14px;
  63.             color: #555555;
  64.             padding: 5px;
  65.             display: flex;
  66.             justify-content: space-between;
  67.         }
  69.         .group{
  70.             padding: 6px 0;
  71.         }
  73.         .group-name{
  74.             font-size: 16px;
  75.             padding: 3px 0;
  76.         }
  78.         .group-item-box{
  79.             display: flex;
  80.             flex-wrap: wrap;
  81.         }
  83.         .group-item{
  84.             font-size: 14px;
  85.             color: #333333;
  86.             padding: 3px 6px;
  87.             margin: 3px;
  88.             border: 1px solid #C8C7CC;
  89.             border-radius: 5px;
  90.         }
  91.         .add_user{
  92.             width: 20px;
  93.             height: 20px;
  94.         }
  95.     </style>
  96.     <body>
  97.         <div id="app_vue">
  98.             <header class="mui-bar mui-bar-nav">
  99.                 <h1 class="mui-title">{
  100.    {window_.title}}</h1>
  101.                 <a class="mui-icon mui-pull-right" v-on:click="selectNum">{
  102.    {selectNum_}}</a>
  103.             </header>
  104.             <div class="mui-content">
  105.                 <div class="all-name">
  106.                     <div v-bind:class="updata_.show_animate ? 'swing animated infinite' : '' " v-for="(item,index) in lists"
  107.                      v-bind:data-index="index" v-on:click="updata_item">
  108.                         {
  109.    {item.name}}
  110.                     </div>
  111.                     <div v-if="!updata_.show_animate" v-on:click="addUser">
  112.                         <img class="add_user" src="image/add_user.png" />
  113.                     </div>
  114.                 </div>
  115.                 <div class="how-people">
  116.                     <div v-on:click="updata">{
  117.    {updata_.show_animate ? '編輯完畢' : '點我編輯' }}</div>
  118.                     <div>共{
  119.    {lists.length}}人</div>
  120.                 </div>
  121.                 <button type="button" class="mui-btn group mui-btn-purple mui-btn-block" v-on:click="isgo">開始隨機分組</button>
  122.                 <div>
  123.                     <div v-for="(item,index) in changeLists">
  124.                         <div class="group-name">第{
  125.    {index + 1}}組,共{
  126.    {item.length}}人</div>
  127.                         <div class="group-item-box">
  128.                             <div class="group-item" v-for="(item_,index_) in item">
  129.                                 {
  130.    {item_.name}}
  131.                             </div>
  132.                         </div>
  133.                     </div>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.         <script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
  139.         <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  140.         <script src="js/mui.js"></script>
  141.         <script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  142.         <script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  143.         <script type="text/javascript">
  144.             mui.init()
  145.             var vm = new Vue({
  146.                 el: '#app_vue',
  147.                 data: {
  148.                     window_: {
  149.                         title: "喲,開始你的錶演吧"
  150.                     },
  151.                     // 主數據集
  152.                     lists: [{
  153.                         name: '111'
  154.                     }, {
  155.                         name: '222'
  156.                     }, {
  157.                         name: '333'
  158.                     }, {
  159.                         name: '444'
  160.                     }, {
  161.                         name: '555'
  162.                     }, {
  163.                         name: '666'
  164.                     }, {
  165.                         name: '777'
  166.                     }, {
  167.                         name: '888'
  168.                     }, {
  169.                         name: '999'
  170.                     }, {
  171.                         name: '100'
  172.                     }],
  173.                     //  分組數據集
  174.                     changeLists: [],
  175.                     selectNum_: 1, // 選擇的 組人數
  176.                     updata_: {
  177.                         show_animate: false, //是否顯示動畫
  178.                     }
  180.                 },
  181.                 created() {
  182.                     //初始化加載方法
  183.                 },
  184.                 methods: {
  185.                     /**
  186.                      * 開始分組
  187.                      * @param {Object} list 數據集
  188.                      * @param {Object} num 組數
  189.                      */
  190.                     isChange: function(list, num) {
  191.                         var self = this;
  192.                         var n = list.length - 1; //获取数组下标的上限
  193.                         var len_ = list.length / num;
  194.                         var length = parseInt(n / num); //获取分组后单组的长度
  195.                         var list1 = JSON.parse(JSON.stringify(list)), // 轉存, 不去影響 主數據
  196.                             list2 = [];
  197.                         var f = length * num;
  198.                         for (var i = 0; i < num; i++) { //根据分组数，确定遍历次数
  199.                             var newlist = [];
  200.                             // 處理 余數 問題. 
  201.                             var dd = length;
  202.                             if (dd < len_ && f < n + 1) {
  203.                                 dd += 1;
  204.                                 f++;
  205.                             }
  206.                             for (var j = 0; j < dd; j++) {
  207.                                 var id = Math.ceil(Math.random(0, list1.length - 1) * list1.length - 1); //获取下标范围内的随机数
  208.                                 newlist.push(list1[id]); //将获取的对象放入定义的变量数组中
  209.                                 list1.splice(id, 1); //从数组中清除当前项
  210.                             }
  211.                             list2.push(newlist); //将变量数组放入结果组数中
  212.                         }
  213.                         self.changeLists = list2;
  214.                     },
  215.                     /**
  216.                      * 分組入口方法
  217.                      */
  218.                     isgo: function() {
  219.                         var self = this;
  220.                         mui.confirm('確認將' + self.lists.length + '人,分為' + self.selectNum_ + '組?', '溫馨提示', ['再想想', '確定'], function(e) {
  221.                             console.log(e.index);
  222.                             if (e.index == 1) {
  223.                                 self.isChange(self.lists, self.selectNum_)
  224.                             }
  225.                         }, 'div')
  226.                     },
  227.                     /**
  228.                      * 選擇 組數
  229.                      */
  230.                     selectNum: function() {
  231.                         var self = this;
  232.                         var picker = new mui.PopPicker();
  233.                         picker.setData([{
  234.                             value: '1',
  235.                             text: '分一組'
  236.                         }, {
  237.                             value: '2',
  238.                             text: '分二組'
  239.                         }, {
  240.                             value: '3',
  241.                             text: '分三組'
  242.                         }, {
  243.                             value: '4',
  244.                             text: '分四組'
  245.                         }, {
  246.                             value: '5',
  247.                             text: '分五組'
  248.                         }, {
  249.                             value: '6',
  250.                             text: '分六組'
  251.                         }, {
  252.                             value: '7',
  253.                             text: '分七組'
  254.                         }, {
  255.                             value: '8',
  256.                             text: '分八組'
  257.                         }]);
  258.                         picker.show(function(selectItems) {
  259.                             console.log(selectItems[0].text); //智子
  260.                             console.log(selectItems[0].value); //zz 
  261.                             self.selectNum_ = selectItems[0].value
  262.                         })
  263.                     },
  264.                     /**
  265.                      * 點我編輯 / 編輯完成
  266.                      */
  267.                     updata: function() {
  268.                         var self = this;
  269.                         if (self.updata_.show_animate) {
  270.                             self.updata_.show_animate = false;
  271.                         } else {
  272.                             self.updata_.show_animate = true;
  273.                         }
  275.                     },
  276.                     /**
  277.                      * 點擊 item  修改項
  278.                      * @param {Object} e item 對象
  279.                      */
  280.                     updata_item: function(e) {
  281.                         var self = this;
  282.                         if (self.updata_.show_animate) {
  283.                             console.log(e);
  284.                             var index = e.target.dataset.index;
  285.                             var lists = self.lists;
  286.                             var list = lists[index]
  287.                             console.log(list);
  288.                             mui.prompt(' ', list.name, '請輸入更改後的名稱', ['刪除', '確定'], function(e) {
  289.                                 if (e.index == 1 && e.value != "") {
  290.                                     console.log(e);
  291.                                     list.name = e.value;
  292.                                     self.lists[index] = list;
  293.                                     self.error();
  294.                                 } else if (e.index == 0) {
  295.                                     console.log(lists);
  296.                                     lists.splice(index, 1);
  297.                                     self.lists = lists;
  298.                                     self.error();
  299.                                 }
  300.                             }, 'div')
  301.                         }
  302.                     },
  303.                     /**
  304.                      * 添加 item
  305.                      */
  306.                     addUser: function() {
  307.                         var self = this;
  308.                         var lists = self.lists;
  309.                         mui.prompt(' ', '請輸入玩家姓名', '新增玩家', ['我再想想', '確定'], function(e) {
  310.                             e.index
  311.                             if (e.index == 1) {
  312.                                 if (e.value != "") {
  313.                                     var json = {};
  314.                                     json.name = e.value;
  315.                                     lists.push(json)
  316.                                     self.lists = lists;
  317.                                     self.error();
  318.                                 } else {
  319.                                     mui.toast('玩家姓名為空,取消添加')
  320.                                 }
  322.                             }
  323.                         }, 'div')
  324.                     },
  325.                     /**
  326.                      * lists 發生變化時 , 提示.並清除分組數據
  327.                      */
  328.                     error: function() {
  329.                         var self = this;
  330.                         if (self.changeLists.length > 0) {
  331.                             mui.toast('人員出現變動, 請重新分組!')
  332.                             self.changeLists = [];
  333.                         }
  335.                     }
  336.                 }
  337.             })
  338.         </script>
  339.     </body>
  341. </html>

发表评论

表情：
评论列表 （有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Paxos的实际应用

    上一篇说明了paxos算法是如何实现数据一致性的，这一节我们来说明常见paxos的具体实际应用，这样可以更好的理解paxos的具体实现。 1、Paxos应用一Chubby

    蔚落蔚落/ 0 赞/ 351 阅读