点阵画图工具

原创

Lengff 2021-11-12 11:48:15 博主文章分类：js ©著作权

文章标签 html i++ jquery 数据格式点击事件 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者Lengff的原创作品，请联系作者获取转载授权，否则将追究法律责任

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