JS Generate Xu Ter Chart

Xu Ter Chart is a small game, in the 5*5 of the lattice, disorderly write 1~25 These 25 numbers, and then find out. In fact, in JS is the 25 number is randomly generated and then put into a table. Mainly divided into two parts, one is the generation of random numbers, and part of the creation of the table.

Create a table

1     //get the container div on the page to put the table on2     vardiv = document.getElementById (' box ');3     //Create a table4     varTB = document.createelement (' table ');5Tb.width= "150";6Tb.border = ' 1 ';7tb.style.textAlign = ' center ';8Tb.style.cssFloat = ' Left ';9     //call the external random number generation function, return a random array of 1~25 that hold unorderedTen     varNums =getrandomnum (); One      for(vari=0; i<5; i++){ A         varTR = document.createelement (' tr ')); -         //The TD of each line is stitched together with a string -         vartd = Nums.slice (I*5,I*5+4). Join (' </td><td> '); the         //set the innerHTML of a row, that is, add a column -tr.innerhtml = ' <td> ' + td + ' </td> '; - tb.appendchild (TR); -     }; +Div.appendchild (TB);

Create a table

Table creation is relatively simple, mainly in the creation of random numbers, the following provides me with several ways to create random numbers

Generate a random number mode one: While + for

The outer one while loop, to determine whether the length of the array is 25, there is no random number in the inside of the current array with for traversal whether there is this number, if not added, there is no Add. Relatively easy to understand

    functionGetrandomnum () {varNums = []; varflag=true;//Identity Bits        //parameter 25 random number         while(nums.length<25) {flag=true; varnum = Math.floor (math.random () *25) +1;  for(vari=0;i<nums.length;i++){                if(num = =Nums[i]) {Flag=false;  Break;            }            }; if(flag) {Nums.push (num);    }; }

Way a code

Mode two: While + for + for

This is in fact similar to the one above, but it is halved in the while loop and halved on the parameters of the random number.

The number of random numbers 1~25 The first addition, the result is the number 26, so we can just generate 1~13 random number, and then 26 to subtract the resulting random number to get the remaining number

1     functionGetrandomnum () {2         varNums2=[];3         varflag=true;4          while(nums2.length<13){5flag=true;6             varnum = Math.floor (math.random () *13) + 1;7              for(vari=0;i<nums2.length;i++){8                 if(Nums2[i] = =num) {9Flag =false;Ten                          Break; One                 } A             } -             if(flag) { - Nums2.push (num); the             } -         } -         //iterate through the number in the array and add the second half randomly -          for(varj=0;j<13;j++){ +             if(Nums2[j] = = 13){ -                 Continue; +             } A         //Nums2.push (26-nums2[j]); The bad thing about this approach is knowing that the 13 numbers in front of you can find the corresponding number atNums2.splice (Math.floor (Math.random () * (NUMS2.LENGTH-13)) +13,0,26-nums2[j]); -};

Mode two

This way the number of random arguments in the while loop is less, but the problem is that the first half of the 1~13 is the second half is 14~25, of course, you can go in, then use an array, and then loop the array of data that has been stored, and randomly insert the data into another empty array

Way three: for + for

Already know that the array is stored in the 1~25 random number, the content has been known, just need to change the order, it can be initialized in order to initialize the array, and then change its index of each item

1     functionGetrandomnum () {2         varNums = [];3          for(vari=1;i<26;i++){4 Nums.push (i);5         };6          for(vari=0;i<nums.length;i++{//can just loop 13 times just about. 7             //take the last number in the array first, and then randomly insert it into the previous position .8Nums.splice (Math.floor (Math.random () * nums.length), 0, Nums.pop ());9         }Ten         returnnums; One};

Mode four: For

From the way three know, anyway, every data need to re-sort, there is no comparison to initialize the data before, directly at the time of insertion, the sequential insertion of the loop variable I can be

1     functionGetrandomnum () {2         varNums = []; 3          for(vari=0; i<26; i++){4             //randomly inserts a loop variable i into a position5Nums.splice (Math.floor (Math.random () * (nums.length+1)), 0, i);6         }7         returnnums;8};

The four-way, can be seen as a third way of an upgrade. Another idea is to not change the index of each data on the basis of mode three, but to create the table by looping through the creation of each cell, then randomly extracting a data from it to populate the cell, and then remove the number from the array. The idea is to loop 25 times when creating a table, which is about the same number of cycles.

JS Generate Xu Ter Chart