JS產生徐特爾圖表

    徐特爾圖表是一個小遊戲，在5*5的格子上，無序的寫着1~25這25個數子，而後再找出來。其實在JS中也就是將25個數進行隨機產生而後放到一個表格中。主要分爲兩部分，一是隨機數的產生，還有一部分就是表格的建立。

建立表格

 1     //拿到頁面上用於放表格的容器DIV
 2     var div = document.getElementById('box');
 3     //建立一個表格
 4     var tb = document.createElement('table');
 5     tb.width="150";
 6     tb.border = '1';
 7     tb.style.textAlign = 'center';
 8     tb.style.cssFloat = 'left';
 9     //調用外部的隨機數產生函數，返回一個存放無序的1~25的隨機數組
10     var nums = getRandomNum();
11     for(var i=0; i<5; i++){
12         var tr = document.createElement('tr');
13         //將每一行的td用字符串給拼接起來
14         var td = nums.slice(i*5,i*5+4).join('</td><td>');
15         //設置行的innerHTML，也就是添加列
16         tr.innerHTML = '<td>' + td +'</td>';
17         tb.appendChild(tr);
18     };
19     div.appendChild(tb);

建立表格

    表格的建立相對比較簡單，主要仍是在隨機數的建立上，下面提供我想到的幾種建立隨機數的方式

 

產生隨機數

方式一：while + for

    外層一個while循環，判斷數組的長度是不是25，裏面沒產生一個隨機數就用for遍歷一次當前的數組中是否有這個數，若是沒有就添加，有就不添加。比較容易理解

    function getRandomNum(){
        var nums = [];
        var flag=true;//標識位
        //參數25個隨機數
        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);
            };
    }

方式一代碼

 

方式二：while + for + for

    這種方式其實和上面的方式一差很少，不過while循環的時候減半，並且在隨機數的參數上也減半。

    隨機數1~25首位相加，獲得的都是數字26，因此咱們能夠只是產生1~13的隨機數，而後再經過26去減去產生的隨機數就能夠獲得剩下的數字

 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         //遍歷數組中的數，隨機添加後半部分
18         for(var j=0;j<13;j++){
19             if(nums2[j] == 13){
20                 continue;
21             }
22         //    nums2.push(26-nums2[j]);    //這種方式的很差的就是知道前面的13個數子就可以找出對應的後面的數子
23             nums2.splice(Math.floor(Math.random()*(nums2.length-13))+13,0,26-nums2[j]);
24         };

方式二

    這種方式在while循環中參數隨機數的次數是少了，可是問題就是前半部分都是1~13後半部分是14~25，固然能夠該進一下，再用一個數組，而後循環已經存放數據的數組，把數據都隨機插入到另一個空數組中

 

方式三：for + for

    已經知道數組裏面存放的是1~25的隨機數，內容已經知道，只是須要改變順序，那就能夠先順序初始化這個數組，而後再改變它的每一項的索引

 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++){　　//能夠只是循環13次就差很少了。
 7             //先把數組中最後一個數給拿出來，而後隨機插入到以前的位置
 8             nums.splice(Math.floor(Math.random()* nums.length),0,nums.pop());
 9         }
10         return nums;
11     };

 

方式四：for

    從方式三知道，反正每個數據都須要從新的排序，那就沒有比較的去初始化以前的數據了，直接在插入的時候，順序的插入循環變量i就能夠了

1     function getRandomNum(){
2         var nums = []; 
3         for(var i=0; i<26; i++){
4             //將循環變量i隨機的插入到某個位置
5             nums.splice(Math.floor(Math.random() * (nums.length+1)), 0, i);
6         }
7         return nums;
8     };

    第四中方式，能夠看出是第三種方式的一個升級而已。還有一種思路就是，在方式三的基礎上不改變每個數據的索引，而是在建立表格的時候，經過循環建立每個單元格，再隨機的從其中抽取一個數據將它填充到單元格中，而後再把這個數從數組中移除掉。這種思路就是在建立表格的時候要循環25次，從循環的次數上來說都差很少