输入一位数字，第一个div改变底色，输入第二位数字，第二个div跟着变色。。。。如此类推。

<!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>
</head>
<body>
<input type="text" id="s1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<script>
var i=0;
document.getElementById("s1").onkeyup=function()
{var a=/^\d+$/g;
var b=/[^\d]/g;
this.value=this.value.replace(b,"");
if(this.value.match(a)!=null)
{var div =document.getElementsByTagName("div");
div[i].style.background="red";
i++;
}
}
</script>
</body>
</html>

解决方案 »

  1.   

    样式可以你自己去定义
    如果用的样式
    就div[i].style.background="red";
    gaicheng div[i].tagName=“你要的名字”
    比如有名字
      

  2.   

    如果我减去一位数字，相关的div的底色要变为无才行
      

  3.   

    <!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>
        .a{ background:red;}
        .b{background:green;}
        .c{background:yellow;}
        .d{background:blue;}
        .e{background:sliver;}
        </style>
    </head>
    <body>
    <input type="text" id="s1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <script type="text/javascript">
    var o=null;
    var div =document.getElementsByTagName("div");
    document.getElementById("s1").onkeyup=function()
    {
    var str=new Array('red','green','yellow','blue','sliver');
    var a=/\d/g;
    if(this.value.match(a)!=null)
    {var length=this.value.match(a).length;
    if(o>length)
    {
    div[o-1].style.background="";
    }
    o=length;
    for(var c=0;c<length;c++)
    {
    div[c].style.background =str[c];
    }}
    }
    </script>
    </body>
    </html>
      

  4.   

    <!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>
        .a{ background:red;}
        .b{background:green;}
        .c{background:yellow;}
        .d{background:blue;}
        .e{background:sliver;}
        </style>
    </head>
    <body>
    <input type="text" id="s1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <script type="text/javascript">
    var o=null;
    var div =document.getElementsByTagName("div");
    document.getElementById("s1").onkeyup=function()
    {
    var str=new Array('red','green','yellow','blue');
    var a=/\d/g;
    if(this.value=="")
    {
    div[0].style.background="";
    }
    if(this.value.match(a)!=null)
    {var length=this.value.match(a).length;
    if(o>length)
    {
    div[o-1].style.background="";
    }
    o=length;
    for(var c=0;c<length;c++)
    {
    if(c<4)
    {
    div[c].style.background =str[c];
    }
    else
    {
    break;
    }
    }
    }
    }
    </script>
    </body>
    </html>jf
      

  5.   

       <input type="text" id="s1">     
            <div id="dv1" ></div>
    <div id="dv2"  > </div>
    <div id="dv3" > </div>
    <div id="dv4" > </div>
    <div id="dv5" ></div>
    <div id="dv6" ></div>
    <div id="dv7" ></div>
    <div id="dv8" ></div>
    <div id="dv9" ></div>
    <div id="dv10"  ></div>
    <div id="dv11" ></div>
    <div id="dv12" ></div>
    <div id="dv13"  ></div>
    <div id="dv14" ></div>
    <div id="dv15"  ></div>
    <div id="dv16"  ></div>
    <div id="dv17"  ></div>
    <div id="dv18"  ></div>for (i=0;i<s1.value.length;i++)
      {
        dv[i].style.background="red";   
      }这样为什么不行？
      

  6.   

    你自己修改下
    <!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>
    </head>
    <body>
    <input type="text" id="s1" />
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script>
    var div=document.getElementsByTagName("div");
    document.getElementById("s1").onkeyup=function()
    {
    for(var i=0;i<this.value;i++)
    {
    div[i].style.background="red";
    }
    }
    </script>
    </body>
    </html>删除原理其实一样的 
      

  7.   

    我的页面上还有其他div，用这个var div =document.getElementsByTagName("div");
    好像不是很好吧。
      

  8.   

    那你就指定div 吧
    用document.getElementsByName
    给 div 取一样的name
      

  9.   

    如果用for循环，只要输入一个数字所有的div都变色了
      

  10.   

    这样，颜色没有改变
    <!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>
    </head>
    <body>
    <input type="text" id="s1" />
    <div name="a">1</div>
    <div name="a">2</div>
    <div name="a">3</div>
    <div name="a">4</div>
    <div name="a">5</div>
    <script>
    var div=document.getElementsByName ("a");
    document.getElementById("s1").onkeyup=function()
    {
    for(var i=0;i<this.value;i++)
    {
    div[i].style.background="red";
    }
    }
    </script>
    </body>
    </html>
      

  11.   

    div=document.getElementsByName ("a");
    获取不到值啊
      

  12.   

    输入没有反应
    <body>
    <input type="text" id="s1">
    <div name="m">1</div>
    <div name="m">2</div>
    <div name="m">3</div>
    <div name="m">4</div>
    <div name="m">5</div>
    <div name="m">6</div>
    <div name="m">7</div>
    <script>
    var i=0;
    document.getElementById("s1").onkeyup=function()
    {var a=/^\d+$/g;
    var b=/[^\d]/g;
    this.value=this.value.replace(b,"");
    if(this.value.match(a)!=null)
    {var div =document.getElementsByName("m");
    div[i].style.background="red";
    i++;
    }
    }
    </script>
    </body>
      

  13.   

    访问某一特定元素尽量用标准的getElementById()，访问标签用标准的getElementByTagName(),但IE不支持getElementsByName()，
      

  14.   

    getElementsByName()， 支持
    不是name 是id=“a”
      

  15.   

    id也不行而且不能用id啊，id要用来控制布局，不可能全部同的
      

  16.   

    我全部试过了，只支持getElementByTagName(),div没有name 
    用class 不行 id也不行
      

  17.   

    怎么不行<div id="a1"></div>
    <script>
    alert(document.getElementsByName("a1").length)
    </script>
    getElementByTagName
     错了 
    getElementsByTagName
      

  18.   

    退格键的事件是什么，我想删除一个数字，触发一个时间，然后
    var div =document.getElementsByName("m");
    div[i].style.background="";
    i++;
      

  19.   

    LZ有点过分了 
    最少要多给我50分
    window.event.keyCode==37;
    event.returnvalue=false;