问将只显示文本放在数独的文本框中
EN

Stack Overflow用户

提问于 2018-07-06 17:14:28

回答 0查看 67关注 0票数 0

我正在尝试制作一个杀手数独网格。这涉及到在常规的3x3正方形内使用拼图粗体线条。我需要在每个单元格的右上角显示一个数字和一个操作。我已经制作了一个表格，每个单元格都作为一个文本框。我需要把一些文字放在左上角，这不能消失或删除。此文本的字体应较小。我试过插入禁用的按钮和背景图片，但它们都弄乱了表格的格式。我知道基本的javascript、html和css。

This is the image of my table.

var an=[1,6,2,3,5,4,2,4,3,1,6,5,5,1,4,6,3,2,4,2,6,5,1,3,3,5,1,4,2,6,6,3,5,2,4,1];
var i,k,e;
function show(b,a){
	document.getElementById(b).style.display='block';
	document.getElementById(a).style.display='none';
	return false;
}
function sh(a,b,c,d,e){
	document.getElementById(a).style.display='block';
	document.getElementById(b).style.display='none';
	document.getElementById(c).style.display='none';
	document.getElementById(d).style.display='none';
	document.getElementById(e).style.display='none';
	return false;
}
function hide(b){
		document.getElementById(b).style.display='none';
		return false;
}
function check1(){
	k=0;
	var c=[];
	for(i=1;i<37;i++){
		a=document.getElementById("c1"+i).value;
		c.push(a);
		if(c[i-1]!=an[i-1])
			k++;
	}
	ale(k);
}
function ale(k){
	if(k==0)
		alert("Right");
	else
		alert(k+" digits wrong");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
.button {
    background-color: #78909c;
    border: none;
    color: white;
    padding: 15px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#submit{
	margin-left: -63px;
	height:30px;
	width:60px;
	font-size:10px;
	background-color: transparent;
	border: none;
	color: black;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}
table{
	border: 2px solid #000000;
}
td{
	border: 1px solid #000000;
    text-align: center;
    vertical-align: middle;  
}
input{
    color: transparent;
    border:1px;
    padding: 10px;
    text-align: center;
    width: 100px;
    text-shadow: 0 0 0 black;
    height: 100px;
    font-size: 50px;
    background-color: #FFFFFF;
    outline: none;
}
input:focus {
    background-color: #e0e0e0;
}
.id{
	width:10px;
	height:10px;
}
#c11,#c12,#c13,#c14,#c15,#c16{border-top:3px solid #000000;border-bottom:3px solid #000000;}
#c18,#c19,#c110,#c111,#c131,#c132,#c133,#c134,#c135,#c136{border-bottom:3px solid #000000;}
#c119,#c120,#c121,#c122,#c123,#c124,#c131,#c132,#c133,#c134,#c126,#c127,#c129,#c130{border-top:3px solid #000000;}
#c11,#c17,#c113,#c119,#c125,#c131,#c114,#c120,#c126,#c13,#c133,#c110,#c116,#c122,#c128{border-left:3px solid #000000;}
#c14,#c122,#c134,#c111,#c117,#c129,#c135,#c16,#c112,#c118,#c124,#c130,#c136{border-right:3px solid #000000;}

<head>
<div id="p1">
<a href="#" class="button" onclick="return sh('0','p1','p3','p2','p4');">HOME</a><br>
<table style:"align: center;">
<center><strong>KILLER MYSTERY OPERATION<br><br><br></strong></center>
<tr>
<td>
<input type="text" id="c11">
</td>
<td>
<input type="text" id="c12">
</td>
<td>
<input type="text" id="c13">
</td>
<td>
<input type="text" id="c14">
</td>
<td>
<input type="text" id="c15">
</td>
<td>
<input type="text" id="c16">
</td>
</tr>
<tr>
<td>
<input type="text" id="c17">
</td>
<td>
<input type="text" id="c18">
</td>
<td>
<input type="text" id="c19">
</td>
<td>
<input type="text" id="c110">
</td>
<td>
<input type="text" id="c111">
</td>
<td>
<input type="text" id="c112">
</td>
</tr>
<tr>
<td>
<input type="text" id="c113">
</td>
<td>
<input type="text" id="c114">
</td>
<td>
<input type="text" id="c115">
</td>
<td>
<input type="text" id="c116">
</td>
<td>
<input type="text" id="c117">
</td>
<td>
<input type="text" id="c118">
</td>
</tr>
<tr>
<td>
<input type="text" id="c119">
</td>
<td>
<input type="text" id="c120">
</td>
<td>
<input type="text" id="c121">
</td>
<td>
<input type="text" id="c122">
</td>
<td>
<input type="text" id="c123">
</td>
<td>
<input type="text" id="c124">
</td>
</tr>
<tr>
<td>
<input type="text" id="c125">
</td>
<td>
<input type="text" id="c126">
</td>
<td>
<input type="text" id="c127">
</td>
<td>
<input type="text" id="c128">
</td>
<td>
<input type="text" id="c129">
</td>
<td>
<input type="text" id="c130">
</td>
</tr>
<tr>
<td>
<input type="text" id="c131">
</td>
<td>
<input type="text" id="c132">
</td>
<td>
<input type="text" id="c133">
</td>
<td>
<input type="text" id="c134">
</td>
<td>
<input type="text" id="c135">
</td>
<td>
<input type="text" id="c136">
</td>
</tr>
</table>
<div id="r1-1">
<a href="#" class="button" onclick="return show('r1-2','r1-1');">Show rules</a><br>
</div>
<div id="r1-2" style="display:none;">
<a href="#" class="button" onclick="return show('r1-1','r1-2');">Hide rules</a><br>
<ul style="list-style-type:disc">
<li>Fill the grid with number between 1 to 6. No numbers should be repeated in any row or column.</li>
<li>The number in each grid is the target number and the symbol is the operation to be used.</li>
<li>Obtain an expression for a#b in terms of a and b. "x" means multiplication.<br><ul style="list-style-type:disc">
	<li>3 # 1 = (2) x (1)</li>
	<li>4 # 2 = (2) x (2)</li>
	<li>5 # 4 = (1) x (4)</li>
	<li>6 # 1 = (5) x (1)</li>
</ul></li>
<li>"∆" is the inverse operation of "#".<br>Hint:<br>If a # b = c then c ∆ b = a.</li>
</ul>
</div>
<button class="button" id="5" onclick=check1()>Check</button>
</div>
</head>

This is my target.

javascript

html

css

textbox

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51206937

复制

相似问题

问将只显示文本放在数独的文本框中
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将只显示文本放在数独的文本框中EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将只显示文本放在数独的文本框中
EN