JS 8*8点阵显示字母

最新推荐文章于 2024-05-07 16:03:09 发布

冷月宫主

最新推荐文章于 2024-05-07 16:03:09 发布

阅读量6.7k

点赞数

分类专栏： J2EE

J2EE 专栏收录该内容

441 篇文章 1 订阅

订阅专栏

还记得用单片机控制小灯显示文字的场景吗，这个是我用JS模拟出来的，字符库没有做扩展，仅能显示A-F这几个字符

<!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="js/jquery-1.8.3.js"type="text/javascript"></script>
 <script type="text/javascript">
 //8*8 数字点阵
 var chars = {};
 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>

冷月宫主

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 8*8点阵显示字母

还记得用单片机控制小灯显示文字的场景吗，这个是我用JS模拟出来的，字符库没有做扩展，仅能显示A-F这几个字符 .in{ background-color: Black;}td{ border: 1px solid #eaeaea; width: 2px; height: 2px;} //8*8 数字点阵 var chars = {}; chars.A
复制链接

扫一扫

专栏目录