<!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. 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台获取当前栏目和顶级栏目

    我们现在要实现的是取出网站当前栏目名称和顶级分类名称,如下所示: 列表页的和单页的不能总是写死的吧?? 我能就要想办法去让他变活的才可以解决问题噢,我们已经有了他的cate_id ,然后我们就可以通过 ...

  2. 编译php时出现xsl错误的解决方法

    是因为系统没安装一个叫 libxslt-devel 的包, 安装上就好了. 附编译php时的常见错误: http://www.myhack58.com/Article/sort099/sort0102 ...

  3. Objective-C代码的文件扩展名与数据类型

    Objective-C数据类型可以分为:基本数据类型.对象类型和id类型. 基本数据类型有:int.float.double和char类型. 对象类型就是类或协议所声明的指针类型,例如:SAutore ...

  4. iOS 学习笔记 三 （2015.03.05）

    服务和特征都是用UUID来唯一标识的,UUID的概念如果不清楚请自行google,国际蓝牙组织为一些很典型的设备(比如测量心跳和血压的设备)规定了标准的service UUID(特征的UUID比较多, ...

  5. Perl 和 Python 的比较 【转】

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&id=4662991&uid=608135 作为万年Perl 党表示最近开 ...

  6. 坑爹的VS2012

    2.2.2.如果卸载 Visual Studio 2010 Service Pack 1,则必须先重新安装 Visual Studio 2010,然后才能再次安装 SP1 如果卸载 Visual St ...

  7. iOS-网址集

    0. 在线工具 http://tool.lu 1. iOS学习笔记汇总链接 https://blog.6ag.cn/533.html 2.iOS开发内购全套图文教程http://mp.weixin.q ...

  8. HDU 5898：odd-even number（数位DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=5898 题意:给出一个区间[l, r],问其中数位中连续的奇数长度为偶数并且连续的偶数长度为奇数的个数.(1< ...

  9. yii2 批量插入or更新

    $sql1 = 'insert into business_ip (gid, name, area, belongName, belongArea, destIPv4, created, update ...

  10. c语言中各个类型的sizeof长度

    #include <stdio.h> int main() {     printf("\nA Char is %lu bytes", sizeof( char )); ...