弄过点阵的都知道画需要一个画图的工具,但是现在很多基本都是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=)