1.Bingo 卡片是什么
5*5的卡片，五个列上标着B-I—N—G-O ，格子中包含1-75 的数字，正中间是一个空的格子，通常印着free
每列可以包含的数字大的范围如下： B列 1~15； I列16~30； N列31~45； G列46~60； O列61~75. 不可以有重复的数字或空的格子。 2.HTML代码：
<body> <h1>Create A Bingo Card</h1> <table> <tr> <th width="20%">B</td> <th width="20%">I</td> <th width="20%">N</td> <th width="20%">G</td> <th width="20%">O</td> </tr> <tr> <td id="square0"> </td> <td id="square1"> </td> <td id="square2"> </td> <td id="square3"> </td> <td id="square4"> </td> </tr> <tr> <td id="square5"> </td> <td id="square6"> </td> <td id="square7"> </td> <td id="square8"> </td> <td id="square9"> </td> </tr> <tr> <td id="square10"> </td> <td id="square11"> </td> <td id="free">free</td> <td id="square12"> </td> <td id="square13"> </td> </tr> <tr> <td id="square14"> </td> <td id="square15"> </td> <td id="square16"> </td> <td id="square17"> </td> <td id="square18"> </td> </tr> <tr> <td id="square19"> </td> <td id="square20"> </td> <td id="square21"> </td> <td id="square22"> </td> <td id="square23"> </td> </tr> </table> <p><a href="Bingo卡片.html" id="reload">Click here</a>to create a new card</p> </body>3.CSS样式：
<style type="text/css"> table{ border-collapse: collapse; /*为表格设置合并边框模型*/ } table tr td, th{ border: 2px solid #666; text-align: center; padding: 10px; } </style>4.JS代码：
window.onload = initAll; var usedNums = new Array(); function initAll(){ if(document.getElementById){ document.getElementById("reload").onclick = anotherCard; newCard(); }else{ alert("sorry,your browser doesn't support this script"); } } function newCard(){ for(var i=0 ; i<24 ; i++ ){ setSquare(i); } } function setSquare(thisSquare){ //thisSquare为形参，实参为传入的不同 i var currSquare = "square" + thisSquare; var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4); var colBasis = colPlace[thisSquare] * 15; var newNum; do{ newNum = colBasis + getNewNum() + 1 ; }while(usedNums[newNum]); usedNums[newNum] = true; document.getElementById(currSquare).innerHTML = newNum; } function getNewNum(){ return Math.floor(Math.random()*15); } function anotherCard(){ for(var i=0 ; i<usedNum.length ; i++){ usedNums[newNum] = false; } newCard(); return false; }效果图： 5.js代码中各个函数的作用：
1) initAll()
调用该函数处理所需的初始化步骤。
在该函数中进行了对象探测，就是对要寻找的对象进行条件测试，
if(document.getElementById){} 如果该对象存在，脚本继续执行，但是，如果浏览器不理解这个对象，测试就会返回false，此时弹出警告框中的内容。
调用 newCard()生成卡片调用anotherCard() 在使用户自定义生成新的卡片2)newCard()
创建新的卡片，调用 setSquare()函数设置每个格子，并向 setSquare()函数传入实参 i，以便后边以此得到每个各自的 id。3)setSquare(thisSquare)
设置每个格子
此处应注意两点：格子中每列 数字的范围；格子中不可有重复数字和空格子。
首先确定范围： var currSquare = “square”+ thisSquare 得到当前格子的id 由于每列格子数字范围不同，所以要进行范围限制，
var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
其次保证每个数字出现至多一次即进行更新数组： 新建一个数组包含76 个元素，这76 个元素分别代表1~75个数处的布尔值。忽略第 0 号元素的值。 var usedNums = newArray(76);
var newNum; 在创建newNum 变量时对它进行初始化。因为将多次设置它，所以在进入循环之前创建只需要创建一次。
将 newNum = colBasis + getNewNum() + 1 ; 放在do while 代码块中，则至少会执行一次，生成第一个数。
while(usedNums[newNum])中，usedNums[newNum] 如为true，则继续生成新的数字直到检查结果为false，将找到之前没有使用过的数字，后usedNums[newNum] 设置为true ，表示该数用过了，将 newNum 写到卡片上。
4) getNewNum()
生成0~15 的随机数并向上取整，由于需要多次用到，将其封装成一个函数。5) anotherCard()
用户自定义生成新的卡片。
将usedNums数组中所有元素设置为false重新利用， 调用 newCard(), 返回false 值，使用户停止点击后浏览器不会装载 herf 指向的页面。
6.总结
要检查脚本使用的对象浏览器是否理解，用到探测对象，步骤如下 ：
if(document.getElementById){ 如果条件语句中的对象存在，测试会返回true，向下运行 }else{
alert(“你的浏览器不支持该脚本”)； } 注意不是总是检查 document.getElementById，要检查的对象取决于脚本要使用的对象。
函数可以返回任何值，字符串 布尔值 数字都可以。
布尔值在初始化之前默认false。
do/while 循环一种常用的用途是从输入的数据中去掉空格或无效的字符，并且会至少执行一次。
函数结尾处的return false 表示停止对用户点击的处理，这样就不会继续装载 href 指向的页面。
