tboydar/creator.html

## creator.html
<html>
	<head>
		<style>
			td{
				border: 1px solid #000000;
				width:20px;
				height:20px;
			}
			.td_black{
				background: black;
			}
		</style>
		<script>
			var isClicked = false;

			document.onmousedown = function() {
			  isClicked = true;
			}
			document.onmouseup = function() {
			  isClicked = false;
			}
			function createTD(){
				var columnNum = document.getElementById("column").value;
				var rowNum = document.getElementById("row").value;
				if(columnNum<=0 || rowNum<=0){
					alert("請輸入數字!!");
					return;
				}
				if(rowNum%8!=0){
					alert("列必須是8的倍數!!");
					return;
				}
				var map = document.querySelector("#map");
				map.innerText = "";
				var table = document.querySelector("table");
				while (table.lastChild) {
				  table.removeChild(table.lastChild);
				}
				for(var i=0;i<rowNum;i++){
					var row = table.insertRow(0);
					for(var j=0;j<columnNum;j++){
						var cell = row.insertCell(j);
						cell.onmousedown= function () {isClicked = true;highlightBG(this);};
						cell.onmouseover= function () {highlightBG(this);};
					}
				}
			}
			function highlightBG(element) {
				if(isClicked)
					element.className = "td_black";
			}
			function getResult(){
				var map = document.querySelector("#map");
				var table = document.querySelector("table");
				var rowNum = document.getElementById("row").value;
				var columnNum = document.getElementById("column").value;
				var result = "{";
				for(var i=0;i<rowNum;i+=8){
					result += (i==0)?"{":", {";
					for(var j=0;j<columnNum;j++){
						result += (j==0)?"":", ";
						var hex = "";
						for(var k=7;k>=0;k--)
							hex += table.rows[i+k].cells[j].className=="td_black"?"1":"0";
						result += "0x" + (("0" + parseInt(hex, 2).toString(16)).slice(-2));
					}
					result += "}";
				}
				result += "}";
				map.innerText = result;
			}
		</script>
	</head>
	<body>
		<input type="text" id="column" value="8"/>行 * <input type="text" id="row" value="8"/> 列
		<button onclick="createTD();">Create</button>
		<button onclick="getResult();">Result</button>
		<table></table>
		<div id="map"></div>
	</body>
</html>
	<html>
	<head>
	<style>
	td{
	border: 1px solid #000000;
	width:20px;
	height:20px;
	}
	.td_black{
	background: black;
	}
	</style>
	<script>
	var isClicked = false;

	document.onmousedown = function() {
	isClicked = true;
	}
	document.onmouseup = function() {
	isClicked = false;
	}
	function createTD(){
	var columnNum = document.getElementById("column").value;
	var rowNum = document.getElementById("row").value;
	if(columnNum<=0 \|\| rowNum<=0){
	alert("請輸入數字!!");
	return;
	}
	if(rowNum%8!=0){
	alert("列必須是8的倍數!!");
	return;
	}
	var map = document.querySelector("#map");
	map.innerText = "";
	var table = document.querySelector("table");
	while (table.lastChild) {
	table.removeChild(table.lastChild);
	}
	for(var i=0;i<rowNum;i++){
	var row = table.insertRow(0);
	for(var j=0;j<columnNum;j++){
	var cell = row.insertCell(j);
	cell.onmousedown= function () {isClicked = true;highlightBG(this);};
	cell.onmouseover= function () {highlightBG(this);};
	}
	}
	}
	function highlightBG(element) {
	if(isClicked)
	element.className = "td_black";
	}
	function getResult(){
	var map = document.querySelector("#map");
	var table = document.querySelector("table");
	var rowNum = document.getElementById("row").value;
	var columnNum = document.getElementById("column").value;
	var result = "{";
	for(var i=0;i<rowNum;i+=8){
	result += (i==0)?"{":", {";
	for(var j=0;j<columnNum;j++){
	result += (j==0)?"":", ";
	var hex = "";
	for(var k=7;k>=0;k--)
	hex += table.rows[i+k].cells[j].className=="td_black"?"1":"0";
	result += "0x" + (("0" + parseInt(hex, 2).toString(16)).slice(-2));
	}
	result += "}";
	}
	result += "}";
	map.innerText = result;
	}
	</script>
	</head>
	<body>
	<input type="text" id="column" value="8"/>行 * <input type="text" id="row" value="8"/> 列
	<button onclick="createTD();">Create</button>
	<button onclick="getResult();">Result</button>
	<table></table>
	<div id="map"></div>
	</body>
	</html>