求邊數為N的正方形所含的小正方形數目，并打印出子正方形

最新推荐文章于 2022-07-27 11:42:48 发布

xiaolong8

最新推荐文章于 2022-07-27 11:42:48 发布

阅读量705

点赞数

分类专栏： Java Web 文章标签： timer function table html button null

本文链接：https://blog.csdn.net/xiaolong8/article/details/7280926

版权

Java Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--   
    Description: 求邊數為N的正方形所含的小正方形數目，并打印出子正方形
    Version	2012/2/21 8:59:02
    Author: xiaolong   
    Date:  2012/2/21 8:58:31
-->  
<html>
    <head>
		<script type="text/javascript">
		<!--
			/// 參數设置
			// 表格背景色
			var SQ_COLOR="#777";
			// 方塊顏色
			var SUB_SQ_COLOR="#111";
			// 定時器
			var timer = null;
			// 定時器運行時間隔時間: ms
			var intervalTime = 200;
			
			/// 計算出子正方形對角線兩點，并存入陣列中，返回該陣列
			function computeSubSquare(side){
				var aSubSquare = new Array();
				for(var i = 0; i < side; i++){
					for(var j = 0; j < side; j++){
						for(var tempI = i, tempJ = j; tempI < side && tempJ < side; tempI++, tempJ++){
							aSubSquare.push( {startPoint : { x: i, y : j },
											 endPoint : { x : tempI, y : tempJ} });
						}
					}
				}
				return aSubSquare;
			}
			
			/// 靜態繪畫出各個子正方形
			function paint(side, aSubSquare){
				var htmlStr = "";
				var startX;
				var startY;
				var endX;
				var endY;
				var lastStartX;
				var laststartY;
				
				for(var i in aSubSquare){
					startX = aSubSquare[i].startPoint.x;
					startY = aSubSquare[i].startPoint.y;
					endX = aSubSquare[i].endPoint.x;
					endY = aSubSquare[i].endPoint.y;
					
					if(startX != lastStartX || startY != laststartY){
						htmlStr += "<br />\r\n"
					}
					htmlStr += "<div align=\"center\">"+i+"</div>";
					htmlStr += "<table cellPadding=0 cellSpacing=1 style=\"border-width:2px; border-color:"+SUB_SQ_COLOR+"; border-style:solid\">\r\n";
					for(var x = 0; x < side; x++){
						htmlStr += "\t<tr>\r\n";
						for(var y = 0; y < side; y++){
							var squareColor = ((x >= startX && x <= endX) && (y >= startY && y <= endY)) ? SUB_SQ_COLOR : SQ_COLOR;
							htmlStr += "\t\t<td id=\"sq"+i+x+y+"\" style=\"background-color:"+squareColor+"\" width=20 height=20> </td>\r\n";
						}
						htmlStr += "\t</tr>\r\n";
					}
					htmlStr += "</table>\r\n";
					lastStartX = startX;
					laststartY = startY;
				}
				document.getElementById("displayDiv").innerHTML = htmlStr;
				return htmlStr;
			}
			
			function paint2(side, aSubSquare){
				///以表格 繪製出正方形
				var table = document.createElement("table");
				table.cellPadding = 0;
				table.cellSpacing = 1;
				table.style.borderWidth = "2px";
				table.style.borderColor = SUB_SQ_COLOR;
				table.style.borderStyle = "solid";
				///以表格單元格 繪製出小正方形
				for(var i = 0; i < side; i++){
					var tr = document.createElement("tr");
					for(var j = 0; j < side; j++){
						var td = document.createElement("td");
						td.id = "td_"+i+"_"+j;
						td.width = td.height = 20;
						td.style.backgroundColor = SQ_COLOR;
						tr.appendChild(td);
					}
					table.appendChild(tr);
				}
				/// 將表格在HTML文檔中顯示
				displayNode = document.getElementById("displayDiv");
				// 清空所有節點
				while (displayNode.firstChild) {
					var oldNode = displayNode.removeChild(displayNode.firstChild);
					oldNode = null;
				}
				// 加入表格節點
				displayNode.appendChild(table);
				
				/// 動態顯示所有子正方形
				index = 0;
				timer = setInterval(function(){
						if(index == aSubSquare.length) {
							clearTimeout(timer);
							out("clearTimeout:"+timer);
							return;
						}
//						out("" + aSubSquare.length + ":" + t);
						var startX = aSubSquare[index].startPoint.x;
						var startY = aSubSquare[index].startPoint.y;
						var endX = aSubSquare[index].endPoint.x;
						var endY = aSubSquare[index].endPoint.y;
						
						//顯示當前陣列索引的子正方形
						for(var x = 0; x < side; x++){
							for(var y = 0; y < side; y++){
								document.getElementById("td_"+x+"_"+y).style.backgroundColor = 
										((x >= startX && x <= endX) && (y >= startY && y <= endY)) 
											? SUB_SQ_COLOR : SQ_COLOR;
							}
						}
						index++;
					}, intervalTime);
			}
						
			function play(squareSide, mode){
				out("timer, squareSide, mode:"+timer +" - "+ squareSide+" - "+mode);
				if(!/^\d+$/.test(squareSide)){
					alert("正方形邊數不能為空，且只能為數字！");
					return;
				}
				if(timer != null){
					out("clearTimeout_play:"+timer);
					clearTimeout(timer);
				}
				aSubSquare = computeSubSquare(squareSide);
				mode == 0 ? paint(squareSide, aSubSquare) : paint2(squareSide, aSubSquare);
			}
					
			function out(str){
				document.getElementById("console").value += str;
				document.getElementById("console").value += "\r\n";
			}
//			window.onload = play;
		-->
		</script>
	</head>
    
    <body>
    	<div id="content" align="center">
			<div id="consoleDiv" style="display:none">
				<textarea name="console" id="console" rows=10 cols=100></textarea>
			</div>
			<div id="inputDiv">
				<label id="inTip" for="in" accesskey="1">請輸入正方形邊數：</label>
				<input type="text" name="in" id="in"/> 
				<select name="mode" id="mode">   
					<option value="0">靜態</option>   
					<option value="1">動態</option>   
				</select>  
				<input type="button" value="開始" οnclick='play(document.getElementById("in").value, 
									document.getElementById("mode").options[document.getElementById("mode").selectedIndex].value)' />
			</div>
			<div id="displayDiv"></div>
		</div>
    </body>
</html>