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 width: 100%;
12 height: 1000px;
13 }
14
15 .all>div:first-child {
16 width: 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 width: 100%;
29 height: 1000px;
30 }
31
32 .all>div:nth-child(3) {
33 width: 100%;
34 height: 400px;
35 /* display: flex;
36 align-items: center;
37 justify-content: center; */
38 }
39
40 #star {
41 width: 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 width: 250px;
52 display: flex;
53 justify-content: space-between;
54 align-items: center;
55 }
56
57 #play1>:last-child {
58 width: 110px;
59 }
60
61 #play2 {
62 width: 250px;
63 display: flex;
64 justify-content: space-between;
65 align-items: center;
66 }
67
68 #play2>:first-child {
69 width: 110px;
70 }
71
72 #play3 {
73 height: 310px;
74 }
75
76 #play3>:last-child {
77 height: 110px;
78 width: 100%;
79 display: flex;
80 justify-content: center;
81
82 }
83
84 #wanjia3 {
85 width: 100%;
86 display: flex;
87 justify-content: center;
88 }
89
90 #play1>div:first-child {
91 width: 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 width: 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 width: 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>
