<!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; 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.yes5{ 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>王志伟</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;

        }

        console.log(aLi[i].innerHTML+"~~~~"+txt)

        if(aLi[i].innerHTML!=txt){

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

            aLi[i].className="no";

        }else{

            blinkBg(aLi[i]);

            clearInterval(btn.timer);

        }

        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","yes5"]

    var i=0;

    obj.timer=setInterval(function(){

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

            clearInterval(obj.timer);

        }

        obj.className=bgArr[i];

        i++;

    },

    150)

}

</script>

逐个后移，匹配符合要求的选项，ie7有bug的更多相关文章

  1. EDM排版table设置padding在ie7下bug

    今天搞EDM发现一个在ie7下很扯淡的bug,由于以前没遇到过,所以花了点时间来解决下. IE7下bug重现: <table cellpadding="0" cellspac ...

  2. 正则表达式 匹配符合A表达式切不符合B表达式的字符串

    有一道这样的面试题 写一个Java方法,利用正则表达式判断输入str中包含字符串”ios“或”apple“(大小写不敏感),但不包括”mediaplayer“.如果满足条件,返回所包含的字符串”ios ...

  3. IE6 IE7 hasLayout bug之li间的3px垂直间距

    1. li中仅包含a,span等内联(行内)元素2.触发条件: li元素的layout被触发(通常为设置了宽或高,设置overflow:hidden在IE7下同样触发layout),且a或span元素 ...

  4. nginx location匹配规则

    谢谢作者的分享精神,原文地址:http://www.nginx.cn/115.html location匹配命令 ~      #波浪线表示执行一个正则匹配,区分大小写~*    #表示执行一个正则匹 ...

  5. 转：nginx location匹配规则

    location匹配命令 ~      #波浪线表示执行一个正则匹配,区分大小写~*    #表示执行一个正则匹配,不区分大小写^~    #^~表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配 ...

  6. Nginx Location 匹配

    location匹配命令 ~      #波浪线表示执行一个正则匹配,区分大小写~*    #表示执行一个正则匹配,不区分大小写^~    #^~表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配 ...

  7. grep精确匹配搜索某个单词的用法 （附: grep高效用法小结)）

    grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用正 ...

  8. [No0000100]正则表达式匹配解析过程分析(正则表达式匹配原理)＆regexbuddy使用＆正则优化

    常见正则表达式引擎引擎决定了正则表达式匹配方法及内部搜索过程,了解它至关重要的.目前主要流行引擎有:DFA,NFA两种引擎. 引擎 区别点 DFA Deterministic finite autom ...

  9. Ngnix location匹配规则

    Ngnix 站点:http://www.nginx.cn Location 匹配命令 ~ 波浪线表示执行一个正则匹配,区分大小写. ~* 表示执行一个正则匹配,不区分大小写. ^~ ^~表示普通字符匹 ...

随机推荐

  1. 「Ruby && Sqlite3」How to install sqlite3 for ruby? (solve: sqlite-ruby no such file...)

    error message:           no such file .... 安装 gem install sqlite3-ruby -- --with-sqlite3-dir=/usr/lo ...

  2. UISegmentedControl（转）

    初始化UISegmentedControl NSArray *arr = [[NSArray alloc]initWithObjects:@"轻拍",@"长按" ...

  3. 【MFC三天一个游戏】之 局域网黑白棋

    欢迎加入我们的QQ群,无论你是否工作,学生,只要有c / vc / c++ 编程经验,就来吧!158427611 花了三天上班时间,妈的上班写就是不能静下心来,擦,要防BOSS巡山.... 以前也写过 ...

  4. 使用 TFDConnection 的 pooled 连接池

    从开始看到这个属性,就一直认为他可以提供一个连接池管理功能, 苦于文档资料太少, 甚至在帮助中对该属性的使用都没有任何介绍,如果你搜索百度,也会发现基本没资料. 最后终于在其官方网站看到了其完整相关的 ...

  5. 、web前端的这么知识应该是怎样的一个知识体系架构？

    .web前端的这么知识应该是怎样的一个知识体系架构?之前我以为可以以W3C为纲要,把W3C的东西学会了就够了.后来发现我错了,W3C还不全面. 真正全面的覆盖了web前端知识体系的东西是——浏览器内核 ...

  6. linux 下安装gsl

    访问 http://ftp.club.cc.cmu.edu/pub/gnu/gsl/下载最新版本的,现在最新的是gsl-1.16.tar.gz,已经是2013年更新的了.然后下载 安装 简便的安装过程 ...

  7. peak num

    class Solution {public: int findPeakElement(vector<int>& nums) {    int i=0;    int n=nums ...

  8. Linux下创建与解压tar, tar.gz和tar.bz2文件及压缩率对比 | 沉思小屋

    刚 在qq群里面一位仁兄问到文件压缩的命令,平时工作中大多用解压缩命令,要是遇到压缩就现查(这不是一个好习惯),于是整理下Linux下创建与解压 zip.tar.tar.gz和tar.bz2文件及他们 ...

  9. 工具项与菜单项实现相同的功能（DevExpress）

    1.在工具栏中添加菜单项.如下:在bar1工具栏中添加菜单项this.barButtonMenuItem(包含图标) this.bar1.LinksPersistInfo.AddRange(new D ...

  10. [HTML]DIV+CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...