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>