生成 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为形参，实参为传入的不同 ivar 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 指向的页面。

生成 Bingo 卡片相关推荐

uniapp生成 NFC 卡片例子
在 uniapp 中生成 NFC 卡片的例子如下: 首先,在项目的 manifest.json 文件中添加 NFC 相关的权限: "permissions": {"nfc ...
根据excel批量生成打印卡片功能
根据excel批量生成打印卡片功能这天某大人在企业微信跟我说上级领导要她打印整个工厂的临时出入车控制卡片,发给我一个资料,让我看看能不能帮她搞一下,资料就如下: 我一看,我操,原来是整个工厂好几百人 ...
Python文字转图片 | 诗词歌词格言生成配图卡片
问题来源最近这几天因为新型冠状病毒疫情的缘故,不得不宅在家里,学业荒废,心中烦闷浮躁.想要静下心来,整理过去,思考当下,展望未来.整理过去包括整理几年来的手机照片.备忘录.浏览器书签.收藏等等,发现 ...
了解 JavaScript （4）– 第一个 Web 应用程序
在下面的例子中,我们将要构建一个 Bingo 卡片游戏,每个示例演示 JavaScript 的不同方面,通过每次的改进将会得到最终有效的 Bingo 卡片. Bingo 卡片的内容美国 Bingo ...
2023 微信卡片生成自定义源码
微信自定义图文卡片链接xml转发链接跳转消息微信卡片生成源码工具,微信打赏卡片源码搭建分享卡片制作防红卡片制作打赏卡片生成,程序主要用来生成微信卡片,创建微信分享给好友,分享到朋友圈的卡片,自定义分享 ...
js学习日记-Bingo Card
用循环进行重复操作例做一个Bingo Card html部分 ... <table> <tr> <td id="s0"> </td> ...
json 数据生成图表_CAPP工艺图表 / 知识重用快速编制
CAXA CAPP工艺图表致力于解决企业工艺编制阶段遇到的各种问题,提供图文混排.知识重用.工艺知识库.典型工艺.汇总统计等能力.帮助企业实现图文混排的快速工艺编制,实现关联信息同步自动修改.工艺资源 ...
生成的头_谷歌新款怪物制造机，用GAN一键生成定制版哥斯拉
新智元报道编辑:卫民 [新智元导读]你想象中的「怪兽」是什么样的?长着老虎的身体.恐龙的脑袋?还是有着猫的爪子.鹰的翅膀?谷歌的一个研究团队推出了一款名为 Chimera Painter 画 ...
HarmonyOS 实战——服务卡片初探索
在刚发布不久的HarmonyOS 2版本的新系统中,[服务卡片]成为一大亮点: 全新的HarmonyOS桌面简洁有序,上滑App生成服务卡片,在桌面即可呈现更丰富的信息. 卡片内容实时更新,只需一瞥即 ...
利用Javascript制作宾果（BINGO）游戏
Bingo游戏简介 Bingo卡片是5×5的正方形,五个列上标着B-I-N-G-O,美国的Bingo游戏格子中的数字通常在70以内随机抽取,英国和澳大利亚的是在90以内.正中间通常是一个空的格子,常常 ...

生成 Bingo 卡片

生成 Bingo 卡片相关推荐

最新文章

热门文章