JS产生徐特尔图表

时间 2019-12-08

原文原文链接

徐特尔图表是一个小游戏，在5*5的格子上，无序的写着1~25这25个数子，而后再找出来。其实在JS中也就是将25个数进行随机产生而后放到一个表格中。主要分为两部分，一是随机数的产生，还有一部分就是表格的建立。css

建立表格

 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遍历一次当前的数组中是否有这个数，若是没有就添加，有就不添加。比较容易理解app

    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循环的时候减半，并且在随机数的参数上也减半。dom

随机数1~25首位相加，获得的都是数字26，因此咱们能够只是产生1~13的随机数，而后再经过26去减去产生的随机数就能够获得剩下的数字ide

 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的随机数，内容已经知道，只是须要改变顺序，那就能够先顺序初始化这个数组，而后再改变它的每一项的索引spa

 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就能够了code

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次，从循环的次数上来说都差很少blog