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