點陣 畫圖 工具
阿新 • • 發佈：2018-11-14
弄過點陣的都知道畫需要一個畫圖的工具,但是現在很多基本都是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 太簡單了, 沒臉在這裡一一去講,看程式碼就懂了的
#效果圖點我檢視
說明: 由於還不知道怎麼處理資料格式,所以就是直接用類似二進位制的方式處理的,以後有時間或者有同學願意和我一起弄的話,就會把這個東西弄的更加完善和優秀