suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert verwandte Dropdown-Feldeffekte während der Schlüsselwortsuche_Javascript-Fähigkeiten

JS implementiert verwandte Dropdown-Feldeffekte während der Schlüsselwortsuche_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:40:241342Durchsuche
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
<title>Hello World</title> 
<link href="style.css" rel="external nofollow" rel="stylesheet" type="text/css"> 
 
<script type="text/javascript"> 
  sources= new Array("www.sina.com","www.baidu.com","www.google.com","www.sina.org","www.baidu.ogr.cn"); 
  tabinfo = ""; 
  flag = new Array(sources.length); 
  for(var i=0;i<flag.length;i++) 
    flag[i] = false ; 
   
  function immediately(){ 
     
    var element = document.getElementById("i1"); 
    if("\v"=="v") { 
      element.onpropertychange = webChange; 
    }else{ 
      element.addEventListener("input",webChange,false); 
    } 
    function webChange(){ 
      var tab = document.all("dl1"); 
      for(var i=0;i<flag.length;i++) 
        flag[i] = false ;//重新初始化 
      if(element.value){ 
        var content = document.getElementById("i1").value; 
        for(var i = 0 ;i < sources.length ; i ++){ 
          if(sources[i].indexOf(content) != -1){ 
            flag[i] = true;    
          } 
        } 
        for(var j=0;j<flag.length;j++){ 
           
          if(flag[j]){//sources[j]有与文本框文字相同的内容 
            if(tab.rows.length>0){ 
              for(var k=0;k<tab.rows.length;k++) 
                if(tab.rows[k].cells[0].innerText.indexOf(content) == -1) 
                  tab.deleteRow(k); 
            } 
            for(var k=0;k<tab.rows.length;k++){ 
              tabinfo += tab.rows[k].cells[0].innerText; 
            }   
            if(tabinfo.indexOf(sources[j]) == -1){  
              nrow = tab.insertRow(0); 
              newcell = nrow.insertCell(); 
              newcell.innerHTML = sources[j]  
            } 
            tabinfo = ""; 
          } 
           
           
        } 
      } 
    } 
  } 
 
</script> 
<script language="javascript"> 
  var lastObj=null;  
  function backBlack(){ 
    event.srcElement.style.background="gray"; 
    forceBackC6(); 
    if(event.srcElement.tagName=="TD"){ 
      lastObj=event.srcElement; 
    } 
    fillData(); 
  } 
  function backC6(){ 
    event.srcElement.style.background="#CCCCCC"; 
  } 
  function forceBackC6(){ 
   if(lastObj!=null) 
    lastObj.style.background="#F8F8FF"; 
  } 
 
 
  function fillData(){ 
    if(lastObj.innerHTML!=null) 
     document.all.i1.value=lastObj.innerHTML;  
  } 
   
  function init(){ 
    Layer1.style.top=i1.offsetTop+40; 
    Layer1.style.left=i1.offsetLeft; 
    Layer1.style.visibility="visible"; 
  } 
  function hideBelow(){ 
    Layer1.style.visibility="hidden"; 
  } 
</script> 
 
</head> 
<body> 
<input type="text" id="i1" style="height:20px" onFocus="init()" onBlur="hideBelow()" /> 
<script type="text/javascript"> 
immediately(); 
</script> 
<div id="Layer1"> 
 <table id="dl1" class="midHead" cellspacing="0" onMouseOut="backC6()" onMouseOver="backBlack()" border="0" > 
   
 </table> 
</div> 
 
<br> 
 
</body> 
</html>

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kontrollkästchen aktiviert und nicht ausgewählt, Beurteilung example_javascript skillsNächster Artikel：Kontrollkästchen aktiviert und nicht ausgewählt, Beurteilung example_javascript skills

In Verbindung stehende Artikel

Mehr sehen