读取似九宫格数字的HTML页面

最新推荐文章于 2022-02-17 11:22:01 发布
最新推荐文章于 2022-02-17 11:22:01 发布
阅读量2.7k 收藏
点赞数
分类专栏： Web前端 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tu451953337/article/details/41644149
版权

我有一个似九宫格图片，每次需要根据行列数读取对应的数字，但是有时眼睛看花，容易读错。所以自己写了个简单的网页输入行列，读取数字。

首先我有这样一个图片：



1.输入A1就要读出数字67。需求非常简单。首先我需要把这个图片做成HTML页面，里面的数字我需要能够直接读出来，图片里的代码难以读出。（什么图片识别技术，我就暂时用不上）

2.首先我就把里面的数字输入到一个文本文件里面。就叫做ViewGride.txt，里面的数据是这样的。

6748577677615854
1079888966756061
1354175760638369
7948107543901520
6472508913619370
6058164962329356
5981061809268345
4229645571169052
2012285204144233
9949569270985980
6988254252262991
8972989167786531
6675736128352066
5205554123525846
4345089397191380
3. 里面数据有点多，直接去写HTML的Table有点麻烦，我想我有个模板页面，然后用java代码生成这个Table页面就行了。

模板页面：

<!-- Javascript goes in the document HEAD --> 
<script type="text/javascript"> 
	function altRows(id){
		if(document.getElementsByTagName){
			var table = document.getElementById(id);
			var rows = table.getElementsByTagName("tr");
			for(i = 0; i < rows.length; i++){
				if(i % 2 == 0){
					rows[i].className = "evenrowcolor";
				}else{  
					rows[i].className = "oddrowcolor";  
				}
			}  
		} 
	}
	window.οnlοad=function(){  
		altRows('alternatecolor'); 
	} 
	
	function focusInput(obj){
		if(obj.value=="A1 B4 H5")
		{
			obj.value = "";
		}
		obj.style.color="black";
	}
	
	var celArr = new Array();
	var colorArr = new Array();
	function submit()
	{
		var col = document.getElementById("col").value.toUpperCase();
		var colArray = col.split(" ");
		var tabObj = document.getElementById("alternatecolor");
		if(celArr.length == 3)
		{
			for(var i=0; i<3; i++)
			{
				celArr[i].style.backgroundColor = colorArr[i];
			}
		}
		var value = "";
		if(colArray.length == 3)
		{
			for(var i=0; i<3; i++)
			{
				var val = colArray[i];
				var row = val.substr(1);
				var colValue = val.substr(0, 1);	
				var cel = tabObj.rows[row].cells[colValue.charCodeAt()-64];
				celArr[i] = cel;
				colorArr[i] = cel.style.backgroundColor;
				cel.style.backgroundColor="#CCC";
				value = value + cel.innerHTML + " ";
			}
			document.getElementById("content").innerHTML = value;
		}
	}
	
	function funcKeyDown(e) {
        if (e.keyCode == 13) {
            submit();
        }
    }
</script>  
<!-- CSS goes in the document HEAD or added to your external stylesheet --> 
<style type="text/css">
	table.altrowstable {
	font-family: verdana,arial,sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #a9c6c9;
	border-collapse: collapse;
}

table.altrowstable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

table.altrowstable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

.oddrowcolor {
	background-color: #77C9FF;
}

.evenrowcolor {
	background-color: #c3dde0;
} 
input.inputclass {
	width:150px;
	color: #9C9C9C;
	text-align: right;
}
.buttoncss {
    font-family: "tahoma";
    font-size:9pt; color: #003399;
    border: 1px #003399 solid;
    color:#006699;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-color: #e8f4ff;
    cursor: hand;
    font-style: normal ;
    width:60px;
    height:22px;
}
.content {
	font-weight:bold;
}
</style>
<body>
		<table class="altrowstable" id="alternatecolor">
<span style="white-space:pre">			</span><!--此处用java代码读取数据源生成表格 -->
		</table>
		<input id="col" value="A1 B4 H5" class="inputclass" οnfοcus="focusInput(this)" οnkeydοwn="funcKeyDown(event)"/> <input id="submit" type="button" class="buttoncss" value="submit"  οnclick="submit()"/>
		<div id="content" class="content"></div>
	</body>
</html>
java代码读取数据源生成表格，我是把HTML模板的上半部分（就是<table>及以上的）保存在head.txt里面，把下半部分（就是</table>及以下的）保存在end.txt里面。 

import java.io.*;

public class GenerateViewCard
{
	public static final String NAME = "ViewGride";
	
	public static void main(String[] args) throws Exception
	{
		generate();
	}
	
	static void generate() throws Exception
	{
		String rootPath = "C:\\Users\\Administrator\\Desktop\\Card\\";
		StringBuilder sb = new StringBuilder();
		
		String header = readFile(rootPath+"head.txt");
		String end = readFile(rootPath+"end.txt");
		sb.append(header);
		sb.append(getTh());
		
		String source = readFile(rootPath+NAME+".txt");
		sb.append(getSource(source));
		sb.append(end);
		System.out.println(sb.toString());
		
		writeFile(rootPath+NAME+".html", sb.toString());
	}
	
	static String getSource(String source)
	{
		StringBuilder sb = new StringBuilder();
		String[] sourceArray = source.split("\n");
		for(int i=0; i<sourceArray.length; i++)
		{
			sb.append("\t\t\t<tr>\n");
			sb.append("\t\t\t\t<td>").append((i+1)).append("</td>\n");
			
			String lineStr = sourceArray[i];
			for(int j=0; j<8; j++)
			{
				String key = lineStr.substring(j*2, (j+1)*2);
				sb.append("\t\t\t\t<td>").append(key).append("</td>\n");
			}
			sb.append("\t\t\t</tr>\n");
		}
		return sb.toString();
	}
	
	static String getTh()
	{
		StringBuilder sb = new StringBuilder();
		sb.append("\t\t\t<tr>\n");
		sb.append("\t\t\t\t<th> </th>\n");
		for(int i=0; i<8; i++)
		{
			sb.append("\t\t\t\t<th>").append((char)(65+i)).append("</th>\n");
		}
		sb.append("\t\t\t</tr>\n");
		return sb.toString();
	}
	
	static String readFile(String fileName) throws Exception
	{
		BufferedReader reader = new BufferedReader(new InputStreamReader(new FileInputStream(fileName)));
		String lineStr = null;
		StringBuilder sb = new StringBuilder();
		while((lineStr = reader.readLine()) != null)
		{
			lineStr = lineStr.replace("%s", NAME);
			sb.append(lineStr+"\n");
		}
		reader.close();
		return sb.toString();
	}
	
	static void writeFile(String fileName, String str) throws Exception
	{
		BufferedWriter write = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(fileName)));
		write.write(str);
		write.flush();
		write.close();
	}
}

然后就是生成ViewGride.html 

<!-- Javascript goes in the document HEAD --> 
<script type="text/javascript"> 
	function altRows(id){
		if(document.getElementsByTagName){
			var table = document.getElementById(id);
			var rows = table.getElementsByTagName("tr");
			for(i = 0; i < rows.length; i++){
				if(i % 2 == 0){
					rows[i].className = "evenrowcolor";
				}else{  
					rows[i].className = "oddrowcolor";  
				}
			}  
		} 
	}
	window.οnlοad=function(){  
		altRows('alternatecolor'); 
	} 
	
	function focusInput(obj){
		if(obj.value=="A1 B4 H5")
		{
			obj.value = "";
		}
		obj.style.color="black";
	}
	
	var celArr = new Array();
	var colorArr = new Array();
	function submit()
	{
		var col = document.getElementById("col").value.toUpperCase();
		var colArray = col.split(" ");
		var tabObj = document.getElementById("alternatecolor");
		if(celArr.length == 3)
		{
			for(var i=0; i<3; i++)
			{
				celArr[i].style.backgroundColor = colorArr[i];
			}
		}
		var value = "";
		if(colArray.length == 3)
		{
			for(var i=0; i<3; i++)
			{
				var val = colArray[i];
				var row = val.substr(1);
				var colValue = val.substr(0, 1);	
				var cel = tabObj.rows[row].cells[colValue.charCodeAt()-64];
				celArr[i] = cel;
				colorArr[i] = cel.style.backgroundColor;
				cel.style.backgroundColor="#CCC";
				value = value + cel.innerHTML + " ";
			}
			document.getElementById("content").innerHTML = value;
		}
	}
	
	function funcKeyDown(e) {
        if (e.keyCode == 13) {
            submit();
        }
    }
</script>  
<!-- CSS goes in the document HEAD or added to your external stylesheet --> 
<style type="text/css">
	table.altrowstable {
	font-family: verdana,arial,sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #a9c6c9;
	border-collapse: collapse;
}

table.altrowstable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

table.altrowstable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

.oddrowcolor {
	background-color: #77C9FF;
}

.evenrowcolor {
	background-color: #c3dde0;
} 
input.inputclass {
	width:150px;
	color: #9C9C9C;
	text-align: right;
}
.buttoncss {
    font-family: "tahoma";
    font-size:9pt; color: #003399;
    border: 1px #003399 solid;
    color:#006699;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-color: #e8f4ff;
    cursor: hand;
    font-style: normal ;
    width:60px;
    height:22px;
}
.content {
	font-weight:bold;
}
</style>
<body>
		<table class="altrowstable" id="alternatecolor">
			<tr>
				<th> </th>
				<th>A</th>
				<th>B</th>
				<th>C</th>
				<th>D</th>
				<th>E</th>
				<th>F</th>
				<th>G</th>
				<th>H</th>
			</tr>
			<tr>
				<td>1</td>
				<td>67</td>
				<td>48</td>
				<td>57</td>
				<td>76</td>
				<td>77</td>
				<td>61</td>
				<td>58</td>
				<td>54</td>
			</tr>
			<tr>
				<td>2</td>
				<td>10</td>
				<td>79</td>
				<td>88</td>
				<td>89</td>
				<td>66</td>
				<td>75</td>
				<td>60</td>
				<td>61</td>
			</tr>
			<tr>
				<td>3</td>
				<td>13</td>
				<td>54</td>
				<td>17</td>
				<td>57</td>
				<td>60</td>
				<td>63</td>
				<td>83</td>
				<td>69</td>
			</tr>
			<tr>
				<td>4</td>
				<td>79</td>
				<td>48</td>
				<td>10</td>
				<td>75</td>
				<td>43</td>
				<td>90</td>
				<td>15</td>
				<td>20</td>
			</tr>
			<tr>
				<td>5</td>
				<td>64</td>
				<td>72</td>
				<td>50</td>
				<td>89</td>
				<td>13</td>
				<td>61</td>
				<td>93</td>
				<td>70</td>
			</tr>
			<tr>
				<td>6</td>
				<td>60</td>
				<td>58</td>
				<td>16</td>
				<td>49</td>
				<td>62</td>
				<td>32</td>
				<td>93</td>
				<td>56</td>
			</tr>
			<tr>
				<td>7</td>
				<td>59</td>
				<td>81</td>
				<td>06</td>
				<td>18</td>
				<td>09</td>
				<td>26</td>
				<td>83</td>
				<td>45</td>
			</tr>
			<tr>
				<td>8</td>
				<td>42</td>
				<td>29</td>
				<td>64</td>
				<td>55</td>
				<td>71</td>
				<td>16</td>
				<td>90</td>
				<td>52</td>
			</tr>
			<tr>
				<td>9</td>
				<td>20</td>
				<td>12</td>
				<td>28</td>
				<td>52</td>
				<td>04</td>
				<td>14</td>
				<td>42</td>
				<td>33</td>
			</tr>
			<tr>
				<td>10</td>
				<td>99</td>
				<td>49</td>
				<td>56</td>
				<td>92</td>
				<td>70</td>
				<td>98</td>
				<td>59</td>
				<td>80</td>
			</tr>
			<tr>
				<td>11</td>
				<td>69</td>
				<td>88</td>
				<td>25</td>
				<td>42</td>
				<td>52</td>
				<td>26</td>
				<td>29</td>
				<td>91</td>
			</tr>
			<tr>
				<td>12</td>
				<td>89</td>
				<td>72</td>
				<td>98</td>
				<td>91</td>
				<td>67</td>
				<td>78</td>
				<td>65</td>
				<td>31</td>
			</tr>
			<tr>
				<td>13</td>
				<td>66</td>
				<td>75</td>
				<td>73</td>
				<td>61</td>
				<td>28</td>
				<td>35</td>
				<td>20</td>
				<td>66</td>
			</tr>
			<tr>
				<td>14</td>
				<td>52</td>
				<td>05</td>
				<td>55</td>
				<td>41</td>
				<td>23</td>
				<td>52</td>
				<td>58</td>
				<td>46</td>
			</tr>
			<tr>
				<td>15</td>
				<td>43</td>
				<td>45</td>
				<td>08</td>
				<td>93</td>
				<td>97</td>
				<td>19</td>
				<td>13</td>
				<td>80</td>
			</tr>
		</table>
		<input id="col" value="A1 B4 H5" class="inputclass" οnfοcus="focusInput(this)" οnkeydοwn="funcKeyDown(event)"/> <input id="submit" type="button" class="buttoncss" value="submit"  οnclick="submit()"/>
		<div id="content" class="content"></div>
	</body>
</html>

最终效果图：


tu451953337
关注
专栏目录
HTML九宫格-表格面板
未来的专栏
08-10 570
HTML九宫格应用非常广泛，本节介绍如何利用金蜘蛛网页设计器的表格面板制作HTML九宫格。既可以制固定宽高的九宫格，也可以制作按父容器改变大小而改变的九宫格。
html数独游戏源代码,数独游戏求解程序（附源代码）
weixin_33597080的博客
05-31 1346
数独游戏规则是一种源自18世纪末瑞士的数学智力拼图游戏。拼图是九宫格(即3格宽×3格高)的正方形状，每一格又细分为一个九宫格。在每一个小九宫格中，分别填上1至9的数字，让整个大九宫格每一列、每一行的数字都不重复。数独的玩法逻辑简单，数字排列方式千变万化。不少教育者认为数独是锻炼脑筋的好方法。计算机算法简介本文所讨论的算法是一种通用算法，虽然不能说是最快的算法，但却可以求解所有的数独游戏。算法准备：...
js+html5实现手机九宫格密码解锁功能
01-19
HTML5真的是很强大，前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个，特定分享一下！ 效果截图如下： 效果看起来还不错吧！ 源码如下： <!DOCTYPE html> <html> <head lang=zh-CN> <meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 name=viewport/> <meta charset=UTF-8> <title>html5实现网页解锁功能</title> <styl
html实现九宫格
08-19
html js 实现九宫格的网页。方便学习，可以应用于教育平台
html九宫格布局原理,CSS九宫格布局
weixin_39623244的博客
05-31 1220
Flex实现原理： 使用flex弹性布局和flex-wrap来设置//html代码九宫格1九宫格2九宫格3九宫格4九宫格5九宫格6九宫格7九宫格8九宫格9// css代码.box {position: relative;width: 100%;height: 600px;}.box-inner {position: absolute;top: 0;left: 0;width: 100%;heigh...
HTML九宫格布局实现方法
09-28
主要介绍了HTML九宫格布局实现方法，瀑布流，九宫格，响应式等布局方式已成为主流，对九宫格布局感兴趣的小伙伴们可以参考一下
js九宫格文字抽奖代码
06-24
九宫格源于中国古代的数字排列，通常用于组织和展示信息，这里被应用于抽奖设计中，即由9个小方格组成的网格，每个格子内可以显示不同的文字，代表不同的奖项或奖品。用户点击启动按钮后，这些文字会按照设定的动画...
HTML5和CSS3
weixin_58361149的博客
11-26 1329
HTML5和CSS3部分知识内容
微信小程序 二 WXML 模板语法 、 WXSS 模板样式 、 全局配置 、 页面配置 、 网络数据请求 、 小案例
m0_55170432的博客
07-05 1103
1.0 WXML 模板语法 1.1 数据绑定的基本原则 在 data 中定义数据 在 WXML 中使用数据 1.12 在 data 中定义页面的数据 在页面对应的 .js 文件中，把数据定义到 data 对象中即可： Page({ data: { // 字符串类型的数据 info: 'init data', // 数组类型的数据 msgList: [{msg: 'hello'},{msg: 'world'}] } }) 1.13 Mustache 语法的格式 把data中的数据绑定
超实用的jQuery代码段
03-04
10.13 使用网格打造简单的九宫格界面 10.14 可动态隐藏的页眉和页脚 10.15 最简单的手机相册 10.16 在列表框上添加气泡提示 10.17 在列表框上添加自定义按钮 10.18 为列表添加自定义的缩略图图标 10.19 创建列表日历...
WebPlotDigitizer基于HTML5的在线工具从绘图图像中提取数字数据
08-08
WebPlotDigitizer - 基于HTML5的在线工具从绘图图像中提取数字数据
HTML5全兼容九宫格布局
03-16
HTML5 九宫格 网页布局 瀑布流布局 响应式布局 全兼容的九宫格布局方案。文档，代码，demo，图片，样式，全部代码！
九宫格网页
08-10
九宫格网页，很漂亮时尚的的九宫格网页，可以任意拖动
九宫格数字键盘
12-25
实现了设置和登录这两个界面的设置密码，界面清新，方块九宫格。
OCR：一个有趣的网页版手写数字识别程序
07-04
这是一个用ANN（人工神经网络）对手写数字进行识别的程序。 有以下一些特性： 1）前端（网页）用JavaScript，html 5，css开发； 2）后端（服务器）用python写的（2.7版本）； 3）功能：#支持在网页画布上（用鼠标）写数字，并会返回预测结果； #支持重置网页画布； #支持向服务器发送训练样本； #支持图片预览，图片上传； #支持对上传的图片中英文字母的识别。 这是一个非常酷的程序，C/S架构，代码也不是很复杂，而且设计了一些很有趣的知识（机器学习，神经网络，http数据传递，前后端开发等等）。感兴趣的同学可以下载下来看一看，有不懂的可以评论留言。
九宫格密码破解
热门推荐
mengtongxch的博客
10-08 5万+
1.实验原理 九宫格的九个点可分别对应1-9这九个数字，分布样式为： 1        2      3  4       5      6  7       8      9 将数字之间的连接路径转换为这9个数字，并按9个数字的16进制对其进行SHA1加密，并存储到gesture.key文件中。 Android九宫格默认至少得有 4个数的口令： 4个数的输入口令可能个数为9*8*7...
九宫格视频监控Vue前端界面布局
mxgsa的专栏
02-17 7204
通过vue、Ant Design Vue组件完成对视频监控页面的布局处理和操作
【html5】input框默认调用九宫格数字键盘
Jerryman_GHJ的博客
03-02 1万+
&lt;input type="number" pattern="\d*"&gt;安卓默认可以调出九宫格但ios需要加上pattern="\d*"
Html5响应式设计实现九宫格
weixin_34362991的博客
06-02 751
自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。 至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下： <!DOCTYPE html> <html> <head...
C++实现九宫格算法
"九宫格C++代码是一个实现九宫格计算的程序，它使用C++语言编写，能够填充一个9x9的九宫格并确保每一行、每一列以及每个小3x3宫格内的数字均不重复。" 在这个程序中，主要涉及以下几个关键知识点： 1. **九宫格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值