javascript - 在数独的文本框中放置仅显示文本

标签 javascript html css textbox

我正在尝试制作 killer 数独网格。这涉及在规则的 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.

最佳答案

使 td 相对，并在其中保留一个绝对定位的跨度，该跨度具有较小的数字； 基本上，添加这两种样式并在 td 中的每个输入标签之前保留一个跨度(具有较小的数字)。

td {
  position: relative;
}

td span {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 14px;
}


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;
}

td {
  position: relative;
}

td span {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 14px;
}
<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>
          <span>31</span>
          <input type="text" id="c11">
        </td>
        <td>
          <span></span>
          <input type="text" id="c12">
        </td>
        <td>
          <span>27</span>
          <input type="text" id="c13">
        </td>
        <td>
          <span></span>
          <input type="text" id="c14">
        </td>
        <td>
          <span></span>
          <input type="text" id="c15">
        </td>
        <td>
          <span>13</span>
          <input type="text" id="c16">
        </td>
      </tr>
      <tr>
        <td>
          <span>3</span>
          <input type="text" id="c17">
        </td>
        <td>
          <span>16</span>
          <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>

关于javascript - 在数独的文本框中放置仅显示文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51206937/

上一篇：html - 重力形式 - 自定义 CSS - 文本颜色

下一篇：javascript - 有没有办法在没有异步的情况下获取 dom.style changed 钩子(Hook)？

相关文章：

css - 如果溢出，防止文本换行

html - 为什么这个伪元素在使用缩放变换时会移动到父元素之上？

html - 内联 Critical CSS 值吗？

html - 如何以更好的方式从 ASP 编辑 html？

css - 将 SVG SMIL 动画转换为 CSS3 动画

javascript - d3.js 中的文本输入字段

javascript - 动画后重置 div

javascript - Angular， Protractor 自动测试定位器不起作用

javascript - 最后一个单选按钮文本输入的编码

html - 具有 3 个 div 的容器，使用 Flex-box/Grid

©2024 IT工具网  联系我们