脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS产生徐特尔图表，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 徐特尔图表是一个小游戏，在5*5的格子上，无序的写着1~25这25个数子，然后再找出来。其实在JS中也就是将25个数进行随机产生然后放到一个表格中。主要分为两部分，一是随机数的产生，还有一部分就是表格的创建。
创建表格
复制代码
1 //拿到页面上用于放表格的容器DIV
2 VAR p = 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 p.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次，从循环的次数上来讲都差不多
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS产生徐特尔图表全部内容，希望文章能够帮你解决javascript代码实例教程-JS产生徐特尔图表所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。