zoukankan html css js c++ java

JS 8*8点阵显示字母

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .in
        {
            background-color: Black;
        }
        td
        {
            border: 1px solid #eaeaea;
            width: 2px;
            height: 2px;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //8*8 数字点阵
        var chars = {};
　　　　//字符库没有做扩展，仅能显示A-F这几个字符,其他字符可自行扩展
        chars.A = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
        chars.B = [[0, 0, 1, 1, 0, 0, 0, 0], [0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0, 0], [0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0, 0]];
        chars.C = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
        chars.D = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 0, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 1, 0, 0], [0, 0, 1, 1, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
        chars.E = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
        chars.F = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
    </script>
</head>
<body>
    8*8 点阵<br />
    请输入字母(A~F)：<input type="text" id="txtChar" />
    <input id="btnGeneral" type="button" value="生成" />
    <table id="tableDot" cellpadding="0" cellspacing="0">
        <script>
            for (var i = 0; i < 8; i++) {
                document.write("<tr>");
                for (var j = 0; j < 8; j++) {
                    document.write("<td></td>");
                }
                document.write("</tr>");
            }
        </script>
    </table>
    <script type="text/javascript">
        $("#btnGeneral").click(function () {
            var input_char = $("#txtChar").val();
            try {
                var charHex = chars[input_char];
                $(".in").removeClass("in");
                $("#tableDot tr").each(function (i) {
                    $(this).find("td").each(function (j) {
                        if (charHex[i][j] == 1) {
                            $(this).addClass("in");
                        }
                    })
                })
            } catch (e) {
 
            }
        })
    </script>
</body>
</html>

查看全文

相关阅读:
UC将发布高性能HTML5游戏引擎XCanvas
一台晚会3.15拯救不了这些高科技公司
 4G时代更有利于TDD的发展
 【leetcode】Binary Tree Zigzag Level Order Traversal
四月电商价格战火重燃服务为决胜之道
 linux sysfs(3)
ubuntu gedit 中文显示乱码解决方法
 研究人员将Windows Phone 7和Windows Azure推广到平流层的大气污染研究中
 迁移周系列II/II： On Premises 迁移视频
 玩Rock, Paper, Azure Challenge，赢取免费Kinect和Xbox 360！

原文地址：https://www.cnblogs.com/yangml/p/3874786.html