JS generates xuser chart

JS generates xuser chart
The xutel chart is a small game. On the 5*5 lattice, 1 ~ is unordered ~ 25, and then find them. In JS, 25 numbers are randomly generated and placed in a table. There are two main parts: Random Number Generation and table creation. Create Table copy code 1 // get the container DIV 2 var div = document on the page for placing the table. getElementById ('box'); 3 // create a table 4 var tb = document. createElement ('table'); 5 tb. width = "150"; 6 tb. border = '1'; 7 tb. style. textAlign = 'center'; 8 tb.style.css Float = 'left'; 9 // call an external random number generation function and return an unordered 1 ~ Random array of 25 10 var nums = getRandomNum (); 11 for (var I = 0; I <5; I ++) {12 var tr = document. createElement ('tr '); 13 // Concatenates the td of each row with a string. 14 var td = nums. slice (I * 5, I * 5 + 4 ). join ('</td> <td>'); 15 // set the innerHTML of the row, that is, add Column 16 tr. innerHTML = '<td>' + td + '</td>'; 17 tb. appendChild (tr); 18}; 19 div. appendChild (tb); Copying code tables is relatively simple, mainly in the creation of random numbers. Below we provide several methods to create random numbers. Method 1: when the while + for outer layer is A while LOOP, judge whether the length of the array is 25. If no random number is generated, use Check whether this number exists in the current array at a time. If no number exists, add it. If yes, no. It is easier to understand to copy the code function getRandomNum () {var nums = []; var flag = true; // identification bit // parameter 25 random numbers while (nums. length <25) {flag = true; var num = Math. floor (Math. random () * 25) + 1; for (var I = 0; I <nums. length; I ++) {if (num = nums [I]) {flag = false; break ;}; if (flag) {nums. push (num) ;}}copy code Method 2: while + for is similar to the above method, but the while loop is halved, in addition, the random number parameter is halved. Random Number 1 ~ Add the first digit of 25 to get the 26 digits, so we can only generate 1 ~ The Random Number of 13, then subtract the generated random number through 26 to get the remaining number copy code 1 function getRandomNum () {2 var nums2 = []; 3 var flag = true; 4 while (nums2.length <13) {5 flag = true; 6 var num = Math. floor (Math. random () * 13) + 1; 7 for (var I = 0; I <nums2.length; I ++) {8 if (nums2 [I] = num) {9 flag = false; 10 break; 11} 12} 13 if (flag) {14 nums2.push (num); 15} 16} 17 // traverse the number in the array, randomly Add the Half 18 for (var j = 0; j <13; j ++) {19 if (nums2 [j] = 13) {20 continue; 21} 22/ /Nums2.push (26-nums2 [j]); // a bad way is to find the corresponding number after knowing the first 13 sub-computers. 23 nums2.splice (Math. floor (Math. random () * (nums2.length-13) + 13, 0, 26-nums2 [j]); 24}; copy the Code. In this way, the number of times the random number of parameters is less in the while loop, but the problem is that the first half is 1 ~ The second half is 14 ~ 25. Of course, you can enter it, use an array, loop through the array that has stored the data, and randomly insert the data into another empty array. Method 3: for + for already knows that the array stores 1 ~ 25 random number, the content already knows, just need to change the order, then you can first initialize this array, and then change its index copy code 1 function getRandomNum () {2 var nums = []; 3 for (var I = 1; I <26; I ++) {4 nums. push (I); 5}; 6 for (var I = 0; I <nums. length; I ++) {// it can be just 13 cycles. 7 // take out the last number in the array and insert it randomly to the previous position 8 nums. splice (Math. floor (Math. random () * nums. length), 0, nums. pop (); 9} 10 return nums; 11}; copy code method 4: for knows from method 3 that every data needs to be sorted again, then there is no comparative data before initialization. during insertion, the sequential insertion of the loop variable I can copy the Code 1 function getRandomNum () {2 var nums = []; 3 for (var I = 0; I <26; I ++) {4 // Insert the cyclic variable I to a random position of 5 nums. splice (Math. floor (Math. random () * (nums. length + 1), 0, I); 6} 7 return nums; 8}; copy the method in the fourth part of the code and you can see that it is the third method.. Another way of thinking is to create each cell through a loop while creating a table without changing the index of each data on the basis of method 3, then randomly extract a data from it and fill it into the cell, and then remove this number from the array. This approach is to recycle 25 times when creating a table, and the number of cycles is similar.