JavaScript实现简单的Bingo卡片
2017-11-01 20:42
495 查看
HTML:
JS:
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 = 0; i < usedNums.length; i++) {
usedNums[i] = false;
}
newCard();
return false;
}
<!DOCTYPE html> <html> <head> <title>Bingo Card</title> <link rel="stylesheet" type="text/css" href="bingo.css"> <script type="text/javascript" src="bingo.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="bingo.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; } 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: #41EAFB; }
JS:
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 = 0; i < usedNums.length; i++) {
usedNums[i] = false;
}
newCard();
return false;
}
相关文章推荐
- JavaScript实现简单的四则运算
- 利用javascript实现简单动画效果。
- 吴昊品工程级别软件项目 Round 5 —— 用JavaScript实现一个简单的注册登录系统
- JavaScript使用setInterval()函数实现简单轮询操作的方法
- javascript图片轮播的简单实现
- javascript-简单的日历实现及Date对象语法介绍(附图)
- 最简单纯JavaScript实现Tab标签页切换的方式(推荐)
- 非常简单的兼容多浏览器Javascript实现分页功能
- 简单的JavaScript实现2048游戏
- Javascript json object 与string 相互转换的简单实现
- 五十行javascript代码实现简单的双向数据绑定
- javascript简单进制转换实现方法
- javascript拖拽原理与简单实现方法[demo]
- JavaScript实现汇率j简单转换工具
- AjaxControlToolkit环境下用Javascript实现简单的Dropdownlist
- JavaScript实现简单的二级导航菜单实例
- Javascript实现简单的选项卡
- JavaScript实际应用:简单二级联动菜单实现
- javascript 哈希表(hashtable)的简单实现
- Javascript实现简单的下拉二级菜单