生成 Bingo 卡片

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 指向的页面。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值