棋盘覆盖JS版本

最新推荐文章于 2021-01-01 18:25:13 发布

fengsser

最新推荐文章于 2021-01-01 18:25:13 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

分类专栏：其他杂项

本文链接：https://blog.csdn.net/fengsser/article/details/8238607

其他杂项专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了使用JavaScript实现棋盘覆盖的代码，虽然代码风格较旧且存在浏览器兼容性问题，尤其是不支持Firefox，但可以作为参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

东西有点年代，代码写得有点难看，另浏览器兼容有些问题，目测firefox不可,仅作参考

效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>期盼覆盖</title>
<script language="javascript">
var tile=1;
var temp=0;

/****************************
 Check the chessBoard length
****************************/
function checkLength()
{
	var boardLength = document.getElementById("length").value;
	var sx = document.getElementById("sx").value;
	var sy = document.getElementById("sy").value;
	if(boardLength<2)
	{
		alert("你输入的棋盘边长有误，输入的边长必需为整数且为2^n次幂。");
		exit();
	}
	if(boardLength&(boardLength-1))
	{
		alert("你输入的棋盘边长有误，输入的边长必需为整数且为2^n次幂。");
		exit();
	}
	if(sx<0)
	{
		alert("你输入的特殊方块有误，请重新输入。");
		exit();
	}
	if(sy<0)
	{
		alert("你输入的特殊方块有误，请重新输入。");
		exit();
	}
	
	insertRecodes(boardLength,sx,sy);
}

/****************************
 Creat the chessBoard 
****************************/
function insertRecodes(boardLength,sx,sy)
{
	var table = document.getElementById("chessBoard");
	var rows=boardLength;
	var cols=boardLength;
	for(var i=0;i<rows;i++)
	{
		var newrow=table.insertRow();
		for(var j =0;j<cols;j++)
		{
			var newcell=newrow.insertCell(j);
		}
	}
	 changeBottom();
	chessBoard(0,0,sx,sy,boardLength);	
}

/****************************
 Color the chessTable   
****************************/
function change(i,j,color)
{
	color%=10;
	switch (color)
	{
		case 1:
			color="blue";
			break;
		case 2:
			color="red";
			break;
		case 3:
			color="#FF00FF";
			break;
		case 4:
			color="#33FF00";
			break;
		case 5:
			color="yellow";
			break;
		case 6:
			color="black";
			break;
		case 7:
			color="#FF6600";
			break;
		case 8:
			color="#00FFFF";
			break;
		case 9:
			color="#99CC00";
			break;
		case 0:
			color="violet";
			break;
		
	}
	var table = document.getElementById("chessBoard");
	var td = table.rows[i].cells[j];
	temp+=300;
	function test(){
		td.style.backgroundColor=color;
	}
	 setTimeout(test,temp)
	
}

function setNum(i,j,num)
{
	var table = document.getElementById("chessBoard");
	var td = table.rows[i].cells[j];
	td.innerHTML = num;
}



/********************************************
 The main function about chessBoard question
********************************************/
function chessBoard(x,y,sx,sy,length)
{
	
	if(length==1)	//边长为一，退出此层循环
	{
		return;
	}
	var t=tile++;
	var l=length/2;
	
	if (sx<x+l && sy<y+l)		//判断特殊方块是否在左上棋盘
	{
		chessBoard (x,y,sx,sy,l); 
	}
	else						//若不在，把右下角设为特殊方块
	{
		change(x+l-1,y+l-1,t); 

        chessBoard (x,y,x+l-1,y+l-1,l);  
	}
	
	if (sx<x+l && sy>=y+l)		//判断特殊方块是否在右上棋盘
	{
		chessBoard (x,y+l,sx,sy,l);  
	}
	else						//若不在，把左下角设为特殊方块
	{
		change(x+l-1,y+l,t);
        chessBoard (x,y+l,x+l-1,y+l,l);  
	}
	
	if ( sx>=x+l && sy<y+l)		//判断特殊方块是否在左下棋盘
	{
		 chessBoard (x+l,y,sx,sy,l);  
	}
	else						//若不在，右上角设为特殊方块
	{
		 change(x+l,y+l-1,t); 
         chessBoard (x+l,y,x+l,y+l-1,l);  
	}
	
	if ( sx>=x+l && sy>=y+l)	//判断特殊方块是否在右下棋盘
	{
		 chessBoard (x+l,y+l,sx,sy,l);  
	}
	else						//若不在，把左上角设为特殊方块
	{
		 change(x+l,y+l,t);  
         chessBoard (x+l,y+l,x+l,y+l,l);  
	}
}


/****************************
 Change the bottom and text
****************************/
function changeBottom()
{
	 document.getElementById("length").disabled="disabled";
	 document.getElementById("sx").disabled="disabled";
	 document.getElementById("sy").disabled="disabled";
	 document.getElementById("submit").value="刷新";
	 document.getElementById("submit").onclick=reflash;
	
}

function reflash()
{
	location.reload();
}

</script>


<style type="text/css">
body{
	width:500px;
	height:400px;
	margin:0 auto;
	margin-top:5px;
	padding:0px;
	text-align:center;
}
</style>

</head>

<body>
<table id="chessBoard" width="500px" height="500px" border="10" cellspacing="0" cellpadding="0" bordercolor="#000000">
</table>

<div style="margin:10px 10px; text-align:center; float:left">
	棋盘边长：
	<input id="length" type="text" style="width:40px;height:19px;" >
</div>
<div style="margin:10px auto; text-align:center; float:left">
	特殊方块：X : 
	<input id="sx" type="text" style="width:40px;height:19px;" >
    Y : 
	<input id="sy" type="text" style="width:40px;height:19px;" >
	<input id="submit" type="submit" value="确定" style="margin-left:10px; height:19px;" onclick="checkLength()"/>
</div>


</body>
</html>