Create a Bingo Card
| B | I | N | G | O |
|---|---|---|---|---|
| Free | ||||
Click here to create a new card
到目前为止,脚本都是在加载页面时自动运行的。但是在现实环境中,常常希望让用户对脚本有更多的控制能力,甚至允许他们控制脚本在何时运行。在这个示例中,脚本仍然是在加载页面时运行。但是,还允许用户单击页面底部的链接来重新运行脚本,这样就可以完全在浏览器中生成Bingo卡片,而不需要从服务器重新加载页面。这向用户提供了快速的响应,而且不会长生服务器负载。
window.onload = initAll;
var usedNums = new Array(76);
function initAll () {
if (document.getElementById){
document.getElementById("reload").onclick = anotherCard;
newCard();//单击是调用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){
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasic = colPlace [thisSquare] * 15;
var newNum;
do{
newNum = colBasic + 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=1; i < usedNums.length; i++){
usedNums[i]=false;//将usedNums[]中的元素设置为false,可以重新利用这些数
}
newCard();//调用newCard函数,重新生成卡片
return false;//返回false值,是浏览器不尝试加载链接的href地址
}