預(yù)備知識點(diǎn)： 1、 “< table >”表示表格， “< tr >”表示表格的開始一行, “< th>”表示表格中列的標(biāo)題單元格， “< td>”表示表格中的每個單元格 2、常用的字符含義 ” “表示空格 & & < < > > " ” &qpos; ‘
程序代碼區(qū)： Html片段：
<!DOCTYPE html><html><head><title>Make Your Own Bingo Card</title><link rel="stylesheet" href="script01.CSS"><script src="script01.js"></script></head><body><h1>Create A Bingo Card</h1><table><tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr><tr><td id="square0"> </td> <!-- 表示空格--><td id="square5"> </td><td id="square10"> </td><td id="square14"> </td><td id="square19"> </td></tr><tr><td id="square1"> </td><td id="square6"> </td><td id="square11"> </td><td id="square15"> </td><td id="square20"> </td></tr><tr><td id="square2"> </td><td id="square7"> </td><td id="free">Free</td><td id="square16"> </td><td id="square21"> </td></tr><tr><td id="square3"> </td><td id="square8"> </td><td id="square12"> </td><td id="square17"> </td><td id="square22"> </td></tr><tr><td id="square4"> </td><td id="square9"> </td><td id="square13"> </td><td id="square18"> </td><td id="square23"> </td></tr></table><p><a href="script01.html" id="reload">Click here</a> to create a new card</p></body></html>css片段：
body {background-color: white;color: black;font-size: 20px;font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;}h1, th {font-family: Georgia, "Times New Roman",Times, serif;}h1 {font-size: 28px;}table {border-collapse: collapse;}th, td {padding: 10px;border: 2px #666 solid;text-align: center;width: 20%;}#free, .pickedBG {background-color: #f66;<!--控制Free的鍵-->}.winningBG {background-image:url(images/redFlash.gif);}js的片段
window.onload = initAll;//窗口的顯示加載，調(diào)用initAll()函數(shù)，事件處理程序調(diào)用函數(shù)function initAll() {for (var i=0; i<24; i++) {var newNum = Math.floor(Math.random() * 75) + 1;//javaScript 命令Math.random()生成0～1 的一個隨機(jī)數(shù)；floor運(yùn)算會獲得結(jié)果的整數(shù)部，最后獲得1到最大值+1的結(jié)果document.getElementById("square" + i).innerHTML = newNum;}}靜態(tài)的展示結(jié)果 
修改js的代碼：使用值傳遞的方式：
window.onload = initAll;function initAll() {for (var i=0; i<24; i++) {setSquare(i);}}function setSquare(thisSquare) {var currSquare = "square" + thisSquare;var newNum = Math.floor(Math.random() * 75) + 1;document.getElementById(currSquare). innerHTML = newNum;}探測對象：對象探測拒絕這種老式瀏覽器（Mac 的Netscape 4）并顯示這個錯誤消息。
window.onload = initAll;function initAll() {if (document.getElementById) {for (var i=0; i<24; i++) {setSquare(i);}}else {alert("Sorry, your browser doesn't support this script");}}function setSquare(thisSquare) {var currSquare = "square" + thisSquare;var newNum = Math.floor (Math.random() * 75) + 1;document.getElementById(currSquare).innerHTML = newNum;}**消除重復(fù)的數(shù)字：更新數(shù)組 將數(shù)組的內(nèi)容改為存儲當(dāng)前值是一種非常強(qiáng)大的技術(shù)**
window.onload = initAll;var usedNums = new Array(76);function initAll() {if (document.getElementById) {for (var i=0; i<24; i++) {setSquare(i);}}else {alert("Sorry, your browser doesn't support this script");}}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,3,3,3,3,3,4,4,4,4,4);var colBasis = colPlace [thisSquare] * 15;var newNum = colBasis + getNewNum() + 1;if (!usedNums[newNum]) {usedNums[newNum] = true;document.getElementById(currSquare).innerHTML = newNum;}}function getNewNum() {return Math.floor(Math.random() * 15);}還允許用戶單擊頁面底部的鏈接來重新運(yùn)行腳本，這樣就可以完全在 瀏覽器中生成Bingo 卡片，而不需要從服務(wù)器重新加載頁面。這向用戶提供了快速的響應(yīng)，而且不會產(chǎn)生服務(wù)器負(fù)載。 讓用戶有能力自己運(yùn)行腳本：
window.onload = initAll;var usedNums = new Array(76);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) {var currSquare = "square" + thisSquare;var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,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=1; i<usedNums.length; i++) {usedNums[i]=false;}newCard();return false;}通過Javascript 添加一個類，使代碼可以利用CSS 的功能
window.onload = initAll;var usedNums = new Array(76);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) {var currSquare = "square" + thisSquare;var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);var colBasis = colPlace [thisSquare] * 15;var newNum;do {newNum = colBasis + getNewNum() + 1;}while (usedNums[newNum]);usedNums[newNum] = true;document.getElementById(currSquare).innerHTML = newNum;document.getElementById(currSquare).className = "";document.getElementById(currSquare).onmousedown = toggleColor;}function getNewNum() {return Math.floor(Math.random() * 15);}function anotherCard() {for (var i=1; i<usedNums.length; i++) {usedNums[i] = false;}newCard();return false;}function toggleColor(evt) {if (evt) {var thisSquare = evt.target;}else {var thisSquare = window.event.srcElement;}if (thisSquare.className == "") {thisSquare.className = "pickedBG";}else {thisSquare.className = "";}}這個腳本使用復(fù)雜的數(shù)學(xué)計(jì)算判斷獲勝組合
window.onload = initAll;var usedNums = new Array(76);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) {var currSquare = "square" + thisSquare;var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);var colBasis = colPlace [thisSquare] * 15;var newNum;do {newNum = colBasis + getNewNum() + 1;}while (usedNums[newNum]);usedNums[newNum] = true;document.getElementById(currSquare).innerHTML = newNum;document.getElementById(currSquare).className = "";document.getElementById(currSquare).onmousedown = toggleColor;}function getNewNum() {return Math.floor(Math.random() * 15);}function anotherCard() {for (var i=1; i<usedNums.length; i++) { usedNums[i] = false;1}newCard();return false;}function toggleColor(evt) {if (evt) {var thisSquare = evt.target;}else {var thisSquare = window.event.srcElement;}if (thisSquare.className == "") {thisSquare.className = "pickedBG";}else {thisSquare.className = "";}checkWin();}function checkWin() {var winningOption = -1;var setSquares = 0;var winners = new Array(31,992,15360,507904,541729,557328,1083458,2162820,4329736,8519745,8659472,16252928);for (var i=0; i<24; i++) {var currSquare = "square" + i;if (document.getElementById (currSquare).className != "") {document.getElementById (currSquare).className = "pickedBG";setSquares = setSquares | Math.pow(2,i);}}for (var i=0; i<winners.length; i++) {if ((winners[i] & setSquares) == winners[i]) {winningOption = i;}}if (winningOption > -1) {for (var i=0; i<24; i++) {if (winners[winningOption] & Math.pow(2,i)) {currSquare = "square" + i;document.getElementById (currSquare).className = "winningBG";}}}}新聞熱點(diǎn)
疑難解答
圖片精選
