BINGO卡片(8)

日期:2016.1.28

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地址
}