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>
  • 相关阅读:
    丰清杨 作业 160809315
    自学C++游戏程序开发学习顺序(转)
    哈佛幸福课相关&积极心理学经典英文原版书籍读书笔记(连载中)(转)
    程序员追求的是什么?
    如何学好游戏编程?
    计算机专业的学生必须掌握的五门课程
    [译]学好数学能让程序员的水平更高
    天下没有免费的午餐
    各个类型书籍推荐
    Peter Norvig:自学编程,十年磨一剑
  • 原文地址:https://www.cnblogs.com/yangml/p/3874786.html
Copyright © 2011-2022 走看看