js学习笔记（一）实现Bingo卡片

最新推荐文章于 2021-05-06 16:56:25 发布

默默前行的蜗牛

最新推荐文章于 2021-05-06 16:56:25 发布

阅读量1.3k

点赞数

分类专栏： js学习笔记文章标签： javascript bingo

本文链接：https://blog.csdn.net/ywf008/article/details/52718056

版权

js学习笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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;
}