<!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. 雅虎工程师提供的CSS初始化代码

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,b ...

  2. Linux/Unix笔记本

    Linux介绍 Linux入门——个人感想 Google怎么用linux 初入Linux Windows XP硬盘安装Ubuntu 12.04双系统图文详解 实例讲解虚拟机3种网络模式(桥接.nat. ...

  3. android 学习随笔七(网络：图片及文本传输及线程关系 )

    主线程.子线程.UI的关系 简单的HTTP请求 -------------------------------------------------------- public class MainAc ...

  4. 鸟哥的linux私房菜学习记录之认识系统服务(daemons)

  5. Bootstrap之Carousel问题

    一.不能自动播放的解决办法 1.默认使用Bootstrap的Carousel组件,只需要加上 data-ride="carousel" 就可以实现自动播放了.无需使用初始化的js函 ...

  6. iOS证书申请详细流程

    一．事前准备 1.1 准备苹果帐号 首先您需要有一个苹果的开发者帐号,一个mac系统.如果没有帐号可以打开申请加入苹果的开发者计划.如何申请网上有详细的介绍,在此不多做介绍. 如果您已经有了一个帐号, ...

  7. linux异步通信之epoll【转】

    转自:http://www.cnblogs.com/snake-hand/archive/2012/08/13/2636229.html 1.简介 epoll是linux提供的一种异步的I/O通知方式 ...

  8. HTTP 请求未经客户端身份验证方案“Anonymous”授权。从服务器收到的身份验证标头为“Negotiate,NTLM”

    转自:http://www.cnblogs.com/geqinggao/p/3270499.html 近来项目需要Web Service验证授权,一般有两种解决方案: 1.通过通过SOAP Heade ...

  9. oracle 日期问题

    共三部分: 第一部分:oracle sql日期比较: http://www.cnblogs.com/sopost/archive/2011/12/03/2275078.html 第二部分:Oracle ...

  10. 八大排序算法之二希尔排序（Shell Sort）

    希尔排序是1959 年由D.L.Shell 提出来的,相对直接排序有较大的改进.希尔排序又叫缩小增量排序 基本思想: 先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序,待整个序列中的记录 ...