<!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>