九宫格

<?php
/*
	九宫格计算程序
	by  张阳 潜龙勿用 541635879@qq.com
	20111226

*/


echo "<span style='font-size:12px'>这里是九宫格</span>";

?>
<script>
var init_x	 = 0;
var init_y	 = 0;

var mouseX;
var mouseY;
</script>
<?

$int_dims	 = intval($_REQUEST['maxlength'])?intval($_REQUEST['maxlength']):3;

$int_dims	 = $int_dims%2?$int_dims:$int_dims+1;
$dims_limit	 = $int_dims*$int_dims;

$y		 = $int_dims - 1;
$x		 = ($int_dims - 1)/2;

$init_arr	 = array();

for($i=1;$i<=$dims_limit;$i++){
	$init_arr[$y%$int_dims][$x%$int_dims]	 = $i;
	if($init_arr[($y+1)%$int_dims][($x+1)%$int_dims]){
		$y--;
	}else{
		$x++;$y++;
	}
}
echo "<hr />";
echo "<div style='width:".($int_dims*50+1)."px;border-left:1px solid #000;border-top:1px solid #000' onmouseout=\"hide_result()\" >\n";
for($i=0;$i<$int_dims;$i++){
	for($j=0;$j<$int_dims;$j++){
		echo "<div id='div_".$i."_".$j."' style=\"width:50px;height:50px;float:left;
		border-right:1px solid #000;border-bottom:1px solid #000;text-align:center;text-valign:middle;font-size:12px;\" 
		onmouseover = \"deep_div(".$i.",".$j.")\" onmouseout=\"deep_div2()\" onclick=\"result(".$i.",".$j.")\" onmousemove	 = \"view_result()\"
		>".$init_arr[$i][$j]."</div>\n";
	}
}
echo "</div>\n";
?>
<div id="result" style="border:1px solid #ccc;background:#FFFFFF;position:absolute;left:1px;top:1px;font-size:12px;padding:10px;display:none">
</div>
<form action=? method=get>
请输入方阵最大项:<input type=text name=maxlength value=<?=$int_dims?>><br />
输入的最大项应该为奇数，如果最大项为偶数，则自动增加1<br />
<input type=submit value="提交">
</form>
<script>
function deep_div(y,x){

	var div_result	 = document.getElementById('result');

	var x_text_arr	 = new Array();
	var y_text_arr	 = new Array();	
	
	var z_text_l_arr	 = new Array();	
	var z_text_r_arr	 = new Array();		
	
	var	x_nums		 = 0;	
	var	y_nums		 = 0;	

	var	z_nums_l		 = 0;	
	var	z_nums_r		 = 0;		
	
	div_result.innerHTML	 = "";

	if(x!=init_x||y!=init_y){
		for(i=0;i<<?=$int_dims?>;i++){
			x_text_arr.push(document.getElementById("div_" + y + "_" + i).innerHTML*1);	 
			x_nums	 = (x_nums + document.getElementById("div_" + y + "_" + i).innerHTML*1);
			y_text_arr.push(document.getElementById("div_" + i + "_" + x).innerHTML*1);	 			
			y_nums	 = (y_nums + document.getElementById("div_" + i + "_" + x).innerHTML*1);

			z_text_l_arr.push(document.getElementById("div_" + i + "_" + i).innerHTML*1);	
			z_nums_l	 = (z_nums_l + document.getElementById("div_" + i + "_" + i).innerHTML*1);
			z_text_r_arr.push(document.getElementById("div_" + (<?=$int_dims?> - 1 - i) + "_" + i).innerHTML*1);			
			z_nums_r	 = (z_nums_r + document.getElementById("div_" + (<?=$int_dims?> - 1 - i) + "_" + i).innerHTML*1);			
			
			document.getElementById("div_" + y + "_" + i).style.background='#D8D8EB';
			document.getElementById("div_" + i + "_" + x).style.background='#D8D8EB';		
		}
		init_x	 = x;
		init_y	 = y;		
		
		div_result.innerHTML = '当前行' + (y+1)*1 + ':<br />' + x_text_arr.join(' + ') + " = " + x_nums + '<br />当前列' + (x+1)*1 + ':<br />' + y_text_arr.join(' + ') + " = " + y_nums + '<br /><br />左上右下之和：<br />' + z_text_l_arr.join(' + ') + " = " + z_nums_l + '<br />左下右上之和：<br />' + z_text_r_arr.join(' + ') + " = " + z_nums_r  ;
	}

}


function deep_div2(){
	for(i=0;i<<?=$int_dims?>;i++){
		document.getElementById("div_" + init_y + "_" + i).style.background='#FFFFFF';
		document.getElementById("div_" + i + "_" + init_x).style.background='#FFFFFF';		
	}
	var div_result	 = document.getElementById('result');	
	
}

function hide_result(){
	var div_result				 = document.getElementById('result');
	div_result.style.display	 = 'none';


	
}

function view_result(){
	var div_result	 = document.getElementById('result');
	
	mouseX	 = event.clientX;
	mouseY	 = event.clientY;		
	
	div_result.style.left		 = mouseX+20;
	div_result.style.top		 = mouseY+20;		
	div_result.style.display	 = '';		
	
}




</script>