点阵画图工具

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

#实现原理

其实就是一个table 太简单了, 没脸在这里一一去讲,看代码就懂了的

#效果图点我查看

说明: 由于还不知道怎么处理数据格式,所以就是直接用类似二进制的方式处理的,以后有时间或者有同学愿意和我一起弄的话,就会把这个东西弄的更加完善和优秀

点阵 画图 工具

猜你喜欢