<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>验证</title>

<style>

#wrap{ width:215px; height:200px; border:1px solid #ddd; margin-top:10px; overflow:auto; position:relative;}

#wrap ul{ padding:0; margin:0;}

#wrap ul li{ width:50px; margin:5px 2px 5px 11px; height:30px; background:#CFC; float:left; font-size:13px; list-style:none; _display:inline; _zoom:1; line-height:30px; text-align:center;}

#wrap ul li.yes1{ background:#40F0ED;}

#wrap ul li.yes2{ background:#5F3FEF;}

#wrap ul li.yes3{ background:#EF3FD7;}

#wrap ul li.yes4{ background:#5F3FEF;}

#wrap ul li.yes{ background:#f00;}

#wrap ul li.no{ background:#F39;}

#tipInfor{ position:absolute; left:0; top:0; overflow:hidden; height:0; z-index:10; width:100%; background:#f1f1f1; color:#333; font-size:13px; font-weight:bold; line-height:24px;}

</style>

</head>

<body>

<div>

  <input type="text" />

  <button>开始</button>

</div>

<div id="wrap">

<div id="tipInfor">亲爱的校友，你填入的名称与学校档案库的姓名，匹配不成功，请您继续报到，我们会进行后台审核并及时更新</div>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    <li>10</li>

    <li>11</li>

    <li>12</li>

    <li>13</li>

    <li>14</li>

    <li>15</li>

    <li>16</li>

    <li>17</li>

    <li>18</li>

    <li>19</li>

    <li>20</li>

    <li>21</li>

    <li>22</li>

    <li>23</li>

    <li>24</li>

  </ul>

</div>

</body>

</html>

<script type="text/javascript">

var obj=document.getElementById("wrap");

var btn=document.getElementsByTagName("button")[0];

var aLi=document.getElementsByTagName("li");

var a=document.getElementById("tipInfor");

btn.onclick=function(){

    init();

    //obj.style.overflow="auto";

    var txt=document.getElementsByTagName("input")[0].value;

    var i=0;

    btn.timer=setInterval(function(){

        if(i==aLi.length){

            clearInterval(btn.timer)

            //obj.style.overflow="hidden";

            a.style.height="100%";

            obj.scrollTop=0;

            return;

        }else{

            var t=aLi[i].innerHTML;

            if(t.trim()==txt.trim()){

            blinkBg(aLi[i]);

            clearInterval(btn.timer);

            }else{

                obj.scrollTop=aLi[i].offsetTop*0.7;

                aLi[i].className="no";

            }

        }

        i++;

    },100)

}

function init(){

    for(var i=0;i<aLi.length;i++){

        aLi[i].className="";

    }

    a.style.height=0;

}

function blinkBg(obj){

    var bgArr=["yes1","yes2","yes3","yes4","yes"]

    var i=0;

    obj.timer=setInterval(function(){

        if(i==bgArr.length-1){

            clearInterval(obj.timer);

        }

        obj.className=bgArr[i];

        i++;

    },

    150)

}

String.prototype.trim=function(){

    var reg=/\s/g;

    return this.replace(reg,"")

}

</script>

可是把ie67下面的bug改好了，其实很简单，ie67下面取出来的字符串是带有空格的，不知道为什么的更多相关文章

  1. 曹工改bug--本来以为很简单的数据库字段长度不足的问题，最后竟然靠抓包才解决

    问题描述 这两天本来忙着新功能开发,结果之前的一个项目最近要上了,然后又在测试,然后就喜提bug一枚(not mine),看bug描述,很简单,而且本地环境也重现了,只要刷入2000个英文字符就可以复 ...

  2. JQuery-Validate明明配置好了但是不生效？卡了2个小时的bug解决了，原因很简单。

    JQuery Validate是表单验证的js工具,一般用于前台页面的校验,例如登陆和注册. 照着教程写了起来,使用Hbulider编辑器,本来写的时候可以用的,但是后来不知道怎么操作的,页面上的校验 ...

  3. Lazarus下面的javascript绑定另外一个版本bug修正

    Lazarus下面的javascript绑定另外一个版本bug修正 从svn 检出的代码有几个问题 1.fpcjs.pas 单元开始有 {$IFDEF FPC} {$MODE delphi} {$EN ...

  4. IE下的bug

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1 ...

  5. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

  6. ubuntu下将CapsLock改为Ctrl键

    需求:Ubuntu下用Vim时,ESC因为在左上角,还算是好按,但是Ctrl就太坑了,在左右两个下角,实在是太不方便了. 经过分析决定将:CapsLock键改为Ctrl,但仍然保留下面的原Ctrl键( ...

  7. ie下的bug之button

    场景描述: 现在页面设计是都喜欢自定义按钮样式,某日接收到页面发现在ie下有bug,上代码: <div> <button><span><a href=&quo ...

  8. Linux下面的yum命令详解

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  9. mysql5.7 mysql库下面的user表没有password字段无法修改密码

    如题所述,mysql5.7  mysql库下面的user表没有password字段无法修改密码, 5.7版本已经不再使用password来作为密码的字段了  而改成了authentication_st ...

随机推荐

  1. springmvc+spring+mybatis分页查询实例版本3,添加条件检索

    在第二个版本上添加了姓名模糊查询,年龄区间查询;自以为easy,结果发现mybatis的各种参数写法基本搞混或是忘了,zuo啊,直接上代码,然后赶紧把mybatis整理一遍再研究自己的项目,应该还会有 ...

  2. [经典php视频]构建正则表达式解析网页中的图像标记<img>

    这是高洛峰php视频中的一段,视频中一边分析需要的功能,一边构建greg_match函数的参数,边讲解边实战,是非常好的一种构建功能的演示. 你不可能把浩瀚的IT资料都记在脑袋里,也不可能随时随地透过 ...

  3. ubuntu SVN环境配置（转）

    一.SVN安装1.安装包$ sudo apt-get install subversion 2.添加svn管理用户及subversion组$ sudo adduser svnuser$ sudo ad ...

  4. 在Asp.Net的Global.asax中Application_Error跳转到自定义错误页无效的解决办法

    在开发Asp.Net系统的时候,我们很多时候希望系统发生错误后能够跳转到一个自定义的错误页面,于是我们经常会在Global.asax中的Application_Error方法中使用Response.R ...

  5. android textView 添加超链接(两种实现方式)

    在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现 在textView添加超链接,有两种方式 ...

  6. Linux设备驱动工程师之路——内核链表的使用【转】

    本文转载自:http://blog.csdn.net/forever_key/article/details/6798685 Linux设备驱动工程师之路——内核链表的使用 K-Style 转载请注明 ...

  7. JSP中文乱码问题解决方法小结

    在使用JSP的过程中,最使人头疼的一个问题就是中文乱码问题,以下是我在软件开发中遇到的乱 码问题以及解决方法. 1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要 ...

  8. 通过SQL Server Profiler来监视分析死锁

    在两个或多个SQL Server进程中,每一个进程锁定了其他进程试图锁定的资源,就会出现死锁,例如,进程process1对table1持有1个排它锁(X),同时process1对table2请求1个排 ...

  9. php单例模式是怎么实现的呢

    <?php /** * 设计模式之单例模式 * $_instance必须声明为静态的私有变量 * 构造函数和析构函数必须声明为私有,防止外部程序new * 类从而失去单例模式的意义 * getI ...

  10. Git的搭建和使用技巧完整精华版

    [Git使用技巧] 1.把一个已经存在于版本库中的文件加入忽略提交文件(.gitignore)中,需要如下代码: git rm --cached [文件路径] 例如: git rm --cached  ...