非常炫的动态动画效果的数字编号查找功能特效

浏览：611次- 评论：0次- 发布时间：2019-08-23

Html

Css


  
  


阿里西西提示您：您所查询的号码不在数据库编号中，请确认您输入的编号是否正确！
  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

var obj=document.getElementById("wrap");
var btn=document.getElementsByTagName("button")[0];
var aLi=document.getElementsByTagName("li");
var a=document.getElementById("tipInfor");
String.prototype.trim=function(){
var reg=/\s/g;
return this.replace(reg,"")
}

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)
 
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：非常炫的动态动画效果的数字编号查找功能特效输入一个编号，点击开始，就会逐个编号进行查找，找到后，数字以闪停方式显现，非常炫的一个特效。

输入一个编号，点击开始，就会逐个编号进行查找，找到后，数字以闪停方式显现，非常炫的一个特效。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取