JS產生徐特爾圖表

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次，從迴圈的次數上來講都差不多