弄過點陣的都知道畫需要一個畫圖的工具,但是現在很多基本都是C端的産品,沒有什麼HTML 實作的功能,我也是一個比較喜歡單片機的(菜雞);是以就寫了一個點陣的畫圖工具 , 直接将下面的代碼 複制到HTML 裡面就可以用
#貼代碼時間
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>點陣 畫圖 工具</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<style>
/*不允許頁面選中*/
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*設定表格的大小*/
table {
width: 500px;
height: 500px;
}
</style>
</head>
<body onload="genTable()">
<table id="table" border="1em" cellspacing="0" cellpadding="0"></table>
<div>
縱向:<input type="number" onchange="changeRow(this,'row')">
橫向:<input type="number" onchange="changeRow(this,'col')">
<button onclick="genTable()"> 建構表格</button>
<button onclick="getIndex()"> 擷取編碼</button>
</div>
<div>
<textarea class="content" cols="30" rows="10"></textarea>
</div>
</body>
<script>
var tArray = new Array(),
color = "D25FFF",//建構時td顯示的顔色
row = 8,//建構時建立的多少行
col = 8,//建構時建立多少列
index = new Array();
/**
* 建立建構時的行和列
* @author Lengff
*/
function changeRow(input, type) {
if (type == 'row') {
row = input.value;
} else if (type == 'col') {
col = input.value;
}
}
/**
* 建構表格
* @author Lengff
*/
function genTable() {
$("#table").html('');
var html = '', tr = "<tr>", trr = "</trr>", td = "<td>", tdd = "</td>";
for (var i = 0; i < row; i++) {
html += tr;
for (var j = 0; j < col; j++) {
html += td + " " + tdd;
}
html += trr;
}
$("#table").append(html);
Coloring();
}
/**
* 上色
* @author Lengff
*/
function Coloring() {
var trs = $("table").find('tr');
for (var i = 0; i < trs.length; i++) {
tArray[i] = new Array();
var tr = $(trs[i]).find('td');
for (var j = 0; j < tr.length; j++) {
tArray[i][j] = $(tr[j]);
tArray[i][j].attr('bgcolor', color);
}
}
}
/**
* 監聽點選事件 實作點選顔色切換功能
* @author Lengff
* @time 2018-11-12 17:05:44
*/
$("table").on("click", "td", function (e) {
var tdColor = $(e.target).attr('bgcolor') === '#ffffff' ? color : '#ffffff';
$(e.target).attr('bgcolor', tdColor);
});
/**
* 擷取下标集合
*/
function getIndex() {
index = new Array();
$(".content").html('');
var html = '['
for (var i = 0; i < row; i++) {
html += '"';
index[i] = new Array();
for (var j = 0; j < col; j++) {
index[i][j] = tArray[i][j].attr('bgcolor') === '#ffffff' ? 1 : 0;
html += index[i][j];
}
html += '",';
}
html += ']';
$(".content").append(html);
}
</script>
</html> #實作原理
其實就是一個table 太簡單了, 沒臉在這裡一一去講,看代碼就懂了的
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)