生成 Bingo 卡片

最新推荐文章于 2021-05-06 16:56:25 发布

LastJuly

最新推荐文章于 2021-05-06 16:56:25 发布

阅读量2.6k

点赞数 2

文章标签： bingo

本文链接：https://blog.csdn.net/NinthSea/article/details/72909766

版权

JS-基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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">&nbsp</td>
                <td id="square1">&nbsp</td>
                <td id="square2">&nbsp</td>
                <td id="square3">&nbsp</td>
                <td id="square4">&nbsp</td>
            </tr>
            <tr>
                <td id="square5">&nbsp</td>
                <td id="square6">&nbsp</td>
                <td id="square7">&nbsp</td>
                <td id="square8">&nbsp</td>
                <td id="square9">&nbsp</td>
            </tr>
            <tr>
                <td id="square10">&nbsp</td>
                <td id="square11">&nbsp</td>
                <td id="free">free</td>
                <td id="square12">&nbsp</td>
                <td id="square13">&nbsp</td>
            </tr>
            <tr>
                <td id="square14">&nbsp</td>
                <td id="square15">&nbsp</td>
                <td id="square16">&nbsp</td>
                <td id="square17">&nbsp</td>
                <td id="square18">&nbsp</td>
            </tr>
            <tr>
                <td id="square19">&nbsp</td>
                <td id="square20">&nbsp</td>
                <td id="square21">&nbsp</td>
                <td id="square22">&nbsp</td>
                <td id="square23">&nbsp</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;
}

效果图：
Bingo Card
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 指向的页面。