用JavaScript编写简单斗地主效果Es6

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         .all {
 11              100%;
 12             height: 1000px;
 13         }
 14 
 15         .all>div:first-child {
 16              50%;
 17             height: 200px;
 18             display: flex;
 19             margin: 0 auto;
 20             justify-content: space-between;
 21             align-items: center;
 22         }
 23 
 24         .all>div:nth-child(2) {
 25             display: flex;
 26             justify-content: space-around;
 27             align-items: center;
 28              100%;
 29             height: 1000px;
 30         }
 31 
 32         .all>div:nth-child(3) {
 33              100%;
 34             height: 400px;
 35             /* display: flex;
 36             align-items: center;
 37             justify-content: center; */
 38         }
 39 
 40         #star {
 41              100px;
 42             height: 100px;
 43             background: red;
 44             border-radius: 50%;
 45             display: flex;
 46             align-items: center;
 47             justify-content: center;
 48         }
 49 
 50         #play1 {
 51              250px;
 52             display: flex;
 53             justify-content: space-between;
 54             align-items: center;
 55         }
 56 
 57         #play1>:last-child {
 58              110px;
 59         }
 60 
 61         #play2 {
 62              250px;
 63             display: flex;
 64             justify-content: space-between;
 65             align-items: center;
 66         }
 67 
 68         #play2>:first-child {
 69              110px;
 70         }
 71 
 72         #play3 {
 73             height: 310px;
 74         }
 75 
 76         #play3>:last-child {
 77             height: 110px;
 78              100%;
 79             display: flex;
 80             justify-content: center;
 81 
 82         }
 83 
 84         #wanjia3 {
 85              100%;
 86             display: flex;
 87             justify-content: center;
 88         }
 89 
 90         #play1>div:first-child {
 91              100px;
 92             height: 100px;
 93             border: 1px solid red;
 94             border-radius: 50%;
 95             display: flex;
 96             align-items: center;
 97             justify-content: center;
 98         }
 99 
100         #play2>div:last-child {
101              100px;
102             height: 100px;
103             border: 1px solid red;
104             border-radius: 50%;
105             display: flex;
106             align-items: center;
107             justify-content: center;
108         }
109 
110         #play3>div:last-child>p {
111              100px;
112             height: 100px;
113             border: 1px solid red;
114             border-radius: 50%;
115             display: flex;
116             align-items: center;
117             justify-content: center;
118         }
119     </style>
120 </head>
121 
122 <body>
123     <div class="all">
124         <div id="play">
125 
126         </div>
127         <div>
128             <div id="play1">
129                 <div>玩家一</div>
130                 <div id="wanjia1">
131 
132 
133                 </div>
134             </div>
135             <div id="star">
136                 <input type="button" value="开始">
137             </div>
138             <div id="play2">
139                 <div id="wanjia2">
140 
141                 </div>
142                 <div>玩家二</div>
143             </div>
144         </div>
145 
146         <div id="play3">
147             <div id="wanjia3">
148 
149             </div>
150             <div>
151                 <p>玩家三</p>
152             </div>
153         </div>
154 
155     </div>
156 
157 
158 
159     <script>
160         let play = document.getElementById('play');
161         let play1 = document.getElementById('wanjia1');
162         let play2 = document.getElementById('wanjia2');
163         let play3 = document.getElementById('wanjia3');
164         let star = document.getElementById('star');
165         let arr = [];//创建数组
166         for (let i = 3; i < 18; i++) {
167             if (i < 16) {
168                 for (let j = 1; j < 5; j++) {
169                     arr.push(`./images/${i}_${j}.jpg`);//吧图片放入数组中
170                 }
171             } else {
172                 arr.push(`./images/${i}_1.jpg`)
173             }
174         }
175         star.onclick = function () {//开始按钮被点击时
176             for (let i = 0; i < arr.length; i++) {//遍历出数组
177                 let num = fn(0, 53);//随机数
178                 let item = arr[i];//item 空数组，将arr[i]放入
179                 arr[i] = arr[num];
180                 arr[num] = item;
181             }
182 
183             let image1 = arr.slice(0, 17);//截取数组
184             let image2 = arr.slice(17, 34);
185             let image3 = arr.slice(34, 51);
186             let image4 = arr.slice(51, 54);
187             image1.sort(paixu);
188             image2.sort(paixu);
189             image3.sort(paixu);
190             image4.sort(paixu);
191             play1.innerHTML = '';//清空
192             for (let a of image1) {
193                 play1.innerHTML += `<img src="${a}" alt="">`//添加数组
194                 play1.lastElementChild.style.marginTop = '-110px'
195             }
196             play2.innerHTML = '';
197             for (let a1 of image2) {
198                 play2.innerHTML += `<img src="${a1}" alt="">`
199                 play2.lastElementChild.style.marginTop = '-110px'
200             }
201             play3.innerHTML = '';
202             for (let a2 of image3) {
203                 play3.innerHTML += `<img src="${a2}" alt="">`
204                 play3.lastElementChild.style.marginLeft = '-70px'
205             }
206             play.innerHTML = '';
207             for (let a3 of image4) {
208                 play.innerHTML += `<img src="${a3}" alt="">`
209             }
210 
211         }
212 
213         function paixu(al, bl) {
214             let ra = al.slice(9, al.lastIndexOf('.'));
215             let rb = bl.slice(9, bl.lastIndexOf('.'));
216 
217             let arr1 = ra.split('_');
218             let arr2 = rb.split('_');
219             // console.log(arr1, arr2)
220             if (parseInt(arr1[0]) < parseInt(arr2[0])) {
221                 return 1;
222             } else if (parseInt(arr1[0]) > parseInt(arr2[0])) {
223                 return -1;
224             }else{
225                 if(arr1[1]<arr2[1]){
226                     return 1;
227                 }else if(arr1[1]>arr2[1]){
228                     return -1;
229                 }else{
230                     return 0;
231                 }
232             }
233 
234         }
235 
236 
237             //随机数函数
238         function fn(min, max) {
239             if (!max) {//当max没有值时
240                 max = min;
241                 min = 0;
242             }
243             return parseInt(Math.random() * (max - min + 1) + min);
244         }
245 
246     </script>
247 </body>
248 
249 </html>
相关阅读:
python
图片放大，缩小等操作
 template-web.js 自定义过滤器
 python
python
Android Volley源码分析及扩展
 Android 6.0动态权限申请教程
 Jarsigner签名使用
 Python正则表达式(总)
Python错误和异常概念(总)
原文地址：https://www.cnblogs.com/yangkaiming/p/9158831.html