<!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项目之----企业网站11之栏目的删除完成

    我们删除要在分类模型中添加一个_before_delete的钩子函数,而且在删除一个分类时候,如果这个分类有子分类就不允许删除 model层代码如下所示: <?php namespace Adm ...

  2. css 标签 清除浮动

    .clearfloat:after{content: "";clear:both;display: block;}

  3. 累加两个php数组,键相同的累加,不同的合并

    1. $arr1=array('name'=>33,'type'=>1); $arr2=array('name'=>33,'price'=>200); $res=array() ...

  4. 关于更改MYECLIPSE JS 代码背景颜色

    白色的背景,看花了眼,你想改一下编辑器的背景颜色,移步这里就可以了. 这时你高兴的打开编辑器,发现颜色确实变了,但是当你打开有JS的JSP时,你碉堡了,发现JS的背景颜色还是默认的, 看着让人纠结,好 ...

  5. 用javascript在客户端删除某一个cookie键值对

    下面这个方法展示如何在客户端浏览器上用javascript删除某一个cookie键值对. //用javascript删除某一个cookie的方法,该方法传入要删除cookie的名称 function ...

  6. CSS 文字阴影（text-shadow）怎么用

    textShadow="1px 1px 1px #ff0000" textShadow="水平位移 垂直位移 模糊半径 阴影颜色"

  7. OpenStack 镜像制作之cloud-init

    Contents [hide] 1 背景 2 密钥登录 2.1 密钥登录的原理 2.1.1 openstack的私钥 2.1.2 密码注入 = 2.1.3 实际遇到的情况 2.1.4 解决办法 背景 ...

  8. HTML5 webapp框架

    1.Sencha Touch 注:jQTouch主要用于手机上的web Kit浏览器上实现一些包括动画.列表导航.默认应用样式等各种常见UI效果的 JavaScript 库.支持包括 iPhone.A ...

  9. 鸟哥的linux私房菜学习记录之bash

    当你对计算机输入一个指令时,bash会将指令传送给核心kernel,核心再去调用相关的程序,启动硬件. 如果直接让用户操作操作系统,可能会造成系统的崩溃,所以操作系统通过应用程序来让用户操作系统即壳程 ...

  10. laravel队列

    三种情况: queue:work 默认只执行一次队列请求, 当请求执行完成后就终止; queue:listen 监听队列请求, 只要运行着, 就能一直接受请求, 除非手动终止; queue:work ...