start04.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" href="script01.css">
<script src="script11.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="start04.html" id="reload">Click here</a> to create a new card</p>
</BODY>
</HTML>
引用的js
script11.js
window.onload = initAll;
function initAll() {
if (document.getElementById) {
var list = new Array(76);
for (var i = 0; i < 24; i++) {
var newNum = null;
do {
newNum = getNum(i);
} while ( list [ newNum ]); //如果存在,则循环下去
list[newNum] = true; //不存在,则设置为true
document.getElementById("square" + i).innerHTML = newNum;
}
} else {
alert("不支持javascript")
}
}
//传参函数,参数为index,需要有返回值
function getNum(index) {
var mod = Math.floor(index / 5);
//alert("mod="+mod);
var newNum = 15 * mod + Math.floor(Math.random() * 15) + 1; //
if (! (newNum >= 15 * mod + 1 && newNum <= 15 * mod + 1 + 14)) {
alert("不符合要求" + newNum + "--" + i);
}
return newNum;
}
上面的js产生的效果是每次点击之后请求整个页面,有个跳转的过程,下面改进的js是只是点击之后,卡片变化,不再请求整个页面
添加CSS效果,鼠标在卡片方格按下去,就会显示红色
script11.js
window.onload = initAll;
var userNums = new Array(76);
function initAll() {
if (document.getElementById) {
document.getElementById("reload").οnclick=anothod;//不点击不执行
newCard();
} else {
alert("不支持javascript")
}
}
function newCard(){
for (var i = 0; i < 24; i++) {
var newNum = null;
do {
newNum = getNum(i);
} while (userNums[newNum]); //如果存在,则循环下去
userNums[newNum] = true; //不存在,则设置为true
document.getElementById("square" + i).innerHTML = newNum;
//添加CSS
document.getElementById("square"+i).className="";
document.getElementById("square"+i).onmousedown = toggleColor;
}//for
}
//鼠标按下去事件
function toggleColor(evt){
if(evt){
var thisSquare=evt.target;
}else {
var thisSquare=window.event.srcElement;
}
if(thisSquare.className==""){
thisSquare.className="pickedBG";
}else{
thisSquare.className=""
}
}
function anothod(){
for(var i=1;i<userNums.length;i++){
userNums[i] = false;
}
newCard();
return false;
}
//传参函数,参数为index,需要有返回值
function getNum(index) {
var mod = Math.floor(index / 5);
//alert("mod="+mod);
var newNum = 15 * mod + Math.floor(Math.random() * 15) + 1; //
if (! (newNum >= 15 * mod + 1 && newNum <= 15 * mod + 1 + 14)) {
alert("不符合要求" + newNum + "--" + i);
}
return newNum;
}
//引用的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;
}