方格中显示数字和输入数字

重新总结一下:
在屏幕中间产生输入框或者叫小格,3个,4个,几个都行.以3个为例.
然后产生0到9的随即数来填充输入框,搁500ms把第一个数显示在第一个格里,不清除,再隔500ms,把第二个数显示在第二个格里,不清除,再隔500ms,把第3个数字显示在小格里.这样3个都完了,隔500ms,全部一起清空.然后我们输入刚才看到的3个数,输入完验证是否相同,3个一起验证.如相同就显示正确,如不同显示错误.只输入一次即可.不知道说的清不清楚了

先发一个,不带验证的,参考了好多东西,写着累啊
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
    <style type="text/css">
      div{
        border:1px solid blue;
        background:#ffc;
        width:100px;
        height:100px;
        position:absolute;
        z-Index:1;
        overflow:auto;
      }
    </style>
    <script type="text/javascript">
      var N=9;
      var a;
      function random_Num()
      {
        return Math.ceil(N*Math.random());
      }
      function _start()
      {
        var x = random_Num();
        a = new Array(x);
        var obj = document.all.box;
        for(i=0;i<=x;i++)
        {
          obj.innerHTML+="<div>"+random_Num()+"</div>";
        }

      }
    </script>
   </head>

  <body>
    <div id="box" style="width:900; height:300 ;background:#fff">
    </div>
    <button onclick="_start()">开始</button>
  </body>
</html>

刚才发错了<html>
  <head>
    <style>
      div{
        border:1px solid blue;
        background:#ffc;
        width:100px;
        height:100px;
        float:left;
        margin:5px;
      }
    </style>
    <script type="text/javascript">
      var N=9;
      var a;
      function random_Num()
      {
        return Math.ceil(N*Math.random());
      }
      function _start()
      {
        var x = random_Num();
        a = new Array(x);
        var s="";
        var obj = document.all.box;
        for(i=0;i<=x;i++)
        {
         a[i]=random_Num();
          s+="<div onclick=\"showForm(this)\">"+a[i]+"</div>";
        }
        obj.innerHTML=s;
        window.setTimeout("clear_content()",2000);
      }
      function clear_content()
      {
        var divobj = document.getElementsByTagName("div");
        for(i=0;i<divobj.length;i++)
        {
           if(divobj[i].id!=="box")
           divobj[i].innerHTML="请输入";
        }

      }
      var curObj = null;
      function showForm(obj){
        if (curObj == null){
             curObj = obj;
             obj.innerHTML = "<textarea onblur=\"submitIt(this);\">" + obj.innerHTML + "</textarea>";
             obj.firstChild.select();
       }
      }      function submitIt(obj){
          curObj.innerHTML = obj.value;
          curObj = null;
      }
    </script>
   </head>

  <body>
    <div id="box" style="float:left; width:100%; height:300 ;background:#fff">

    </div>
    <button onclick="_start()">测试</button><button onclick="_yz()">验证</button>
  </body>
</html>

<SCRIPT LANGUAGE="JavaScript">
var refreshTime = 500//刷新时间 ms
var clearTime = 500//清除输入时间 msvar tempNum = 0;
var tempArray;
var timer;/******************************************************/
//构造guess table
function getTable()
{
var guessTable = document.getElementById("guess");
guessTable.border=1
guessTable.width = (tempNum*35)+"px";
var tr = guessTable.insertRow();
tr.height="25";
tr.align="center";
for(var i=0;i<tempNum;i++)
{
tr.insertCell().innerHTML = " ";
}
}function inputTable()
{
var tr = document.getElementById("guess").rows[0];
for(var i=0;i<tr.cells.length ;i++)
{
setTable(i,"<input type=''>")
}
}function setTable(cellIndex,str)
{
document.getElementById("guess").rows[0].cells[cellIndex].innerHTML = str;
}function setMsg(msg)
{
document.getElementById("msg").innerHTML = msg;
}
/********************************************************///建立页面
function load()
{
if(timer)
window.clearTimeout(timer);
document.body.innerHTML = "请输入方格数量:<input type='text' size=2 onkeyup='goStep1(this)'> <input type='button' onclick='load()' value='重新开始'><BR><div id='msg'></div><table id=guess></table>";
}//根据输入初始化
function goStep1(obj)
{
if(/[1-9]/.test(obj.value))//当前限制1-9个方格
{
tempNum = parseInt(obj.value);
tempArray = new Array(tempNum);
obj.disabled=true;
setMsg("正在建立表格");
getTable();
timer = setTimeout("goStep2("+tempNum+")",refreshTime);
}
else
{
alert("请输入1-9的数字");
obj.value="";
obj.focus();
}
}//获取随机数
function goStep2(i)
{
if(tempNum>0)
{
tempNum--;
var n = parseInt(Math.random()*10);
setMsg("现在显示第"+(i-tempNum)+"个数");
tempArray[i-tempNum-1]=n;
setTable((i-tempNum-1),n);
timer = setTimeout("goStep2("+i+")",refreshTime);
}
else
{
timer = setTimeout(goStep3,refreshTime);
}
}function goStep3()
{
setMsg("请输入:");
var tr = document.getElementById("guess").rows[0];
for(var i=0;i<tr.cells.length ;i++)
{
setTable(i,"<input type='text' size=2 name='num' onkeyup='check(this)'>");
}
var input1 = document.createElement("input");
input1.type="button";
input1.onclick=checkAll;
input1.value="确认";
document.body.appendChild(input1);
}//检测输入是否合法
function check(obj)
{
if(!(/[0-9]/.test(obj.value)))
{
alert("请输入0-9的数字");
obj.value="";
obj.focus();
}
}//确认
function checkAll()
{
var flag = true;
var input = document.getElementsByName("num");
for(var i=0;i<input.length;i++)
{
if(!(/[0-9]/.test(input[i].value) && parseInt(input[i].value)== tempArray[i]))
{
flag = false;
}
} for(var i=0;i<input.length;i++)
{
input[i].disabled=true;
}
var str = ""
if(flag)
str="<font color=red>恭喜你全猜对了！</font>";
else
{
str="很遗憾你猜错了！<BR>正确的数字应该是:";
for(var i=0;i<tempArray.length;i++)
{
str+=tempArray[i]+"  ";
}
}
setMsg(str);
}window.onload=load;
</SCRIPT>

<html>
<head>
<script language="javascript">
var v1;  //保存数据1
var v2;  //保存数据2
var v3;  //保存数据3
var i=1;
function start1()
{
   if(i<4)
    {
       var txt=document.getElementById("txt"+i);
       txt.value=Math.ceil(9*Math.random());
        if(i==1)
         {
          v1=txt.value;
          }
       if(i==2)
         {
          v2=txt.value;
          }
        if(i==3)
         {
          v3=txt.value;
          }

       i++;
       window.setTimeout("start1();",1000);
    }
    else
    {
      sp1.innerText="请输入刚才文本框所产生的随机数字(焦点离开第三个文本框时显示答案)";
      clear();
    }

   }
function clear()
{
      txt1.value="";
      txt2.value="";
      txt3.value="";
}

function result()
{
   if(v1==txt1.value && v2==txt2.value && v3==txt3.value)
     {
      alert("结果正确");
      i=1;
      clear();
       sp1.innerText="";
     }
     else
     {
     alert("结果错误");
     i=1;
     clear();
      sp1.innerText="";
     }

}
</script>
</head>
<body>
  <input type="button" value="游戏开始" onclick="start1();"/>
  <input type="text" id="txt1" />
  <input type="text" id="txt2" />
  <input type="text" id="txt3"  onblur="result();"/>
  <span id="sp1" />
</body>
</html>

有点小失误 goStep2替换一下字体闪烁也是改这个方法我不帮改了吃饭
//获取随机数
function goStep2(i)
{
if(tempNum>0)
{
tempNum--;
var n = parseInt(Math.random()*10);
setMsg("现在显示第"+(i-tempNum)+"个数");
tempArray[i-tempNum-1]=n;
setTable((i-tempNum-1),n);
timer = setTimeout("goStep2("+i+")",refreshTime);
}
else
{
setMsg(parseFloat(clearTime/1000)+"秒后将开始猜测");
timer = setTimeout(goStep3,clearTime);
}
}

调试易

方格中显示数字和输入数字

解决方案 »