Detailliertes Beispiel für die Implementierung der Suchsymbolleiste über Javascript-js-Tutorial-php.cn

Detailliertes Beispiel für die Implementierung der Suchsymbolleiste über Javascript

巴扎黑

Freigeben： 2017-05-22 11:46:09

Original

1663 Leute haben es durchsucht

Eins: Endeffekt
Detailliertes Beispiel für die Implementierung der Suchsymbolleiste über Javascript

Zweit: Prinzip

Wenn Sie in Yahoo nach „China“ suchen, Dann erhalten Sie in der Adressleiste des Browsers eine Zeichenfolge wie diese: http://search.cn.yahoo.com/search?ei=gbk&fr=fp-tab-web-ycn&meta=vl%
3Dlang_zh-CN %26vl %3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button
&p=%D6%D0%B9%FA&Submit=
Es sieht etwas verwirrend aus, bitte vereinfachen Sie es: http://search.cn.yahoo.com/search ?&p= %D6%D0%B9%FA
Dies ist der Schlüssel. Wobei &p=%D6%D0%B9%FA der Schlüsselwortparameter der Suche ist und %D6%D0%B9%FA „China“ ist „
URL-Kodierung. OK, solange wir eine solche Codierung erstellen können.

Drei: URL-Kodierung
Die Funktion encodeURIComponent() von JavaScript kann die Kodierungsarbeit abschließen.
Zum Beispiel können wir im obigen Beispiel „http://search.cn.yahoo.com/search?&p="+encodeURIComponent("China");“ verwenden.

Viertens: Code
(Klicken Sie zum Erweitern auf das Pluszeichen)

Der Code lautet wie folgt:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %> 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" > 
 <head runat="server"> 
     <title>Search</title> 
 <script language="javascript" type="text/javascript"> 
 // <!CDATA[ 
 function GetEncodeOfKey() 
 { 
     var strKey = window.document.getElementById("Text_Key").value;       
     return  encodeURIComponent(strKey);  
 } 
 function GetUrl(site) 
 { 
     var encode=GetEncodeOfKey(); 
     //web 
     if(document.getElementById("RadioButtonList_Kind_0").checked) 
     { 
         if(site=="google") 
         { 
             return "http://www.google.com/search?q="+encode+"&ei=UTF-8"; 
         } 
         else 
         { 
             return "http://search.yahoo.com/search?p="+encode+"&ei=UTF-8"; 
         } 
     } 
     //mp3 
     else if(document.getElementById("RadioButtonList_Kind_1").checked) 
     { 
         if(site=="google") 
         { 
             return "http://www.google.com/search?q="+encode+" mp3"+"&ei=UTF-8"; 
         } 
         else 
         { 
             return "http://audio.search.yahoo.com/search/audio?&p="+encode+"&ei=UTF-8"; 
         } 
     } 
     //img 
     else if(document.getElementById("RadioButtonList_Kind_2").checked) 
     { 
         if(site=="google") 
         { 
             return "http://images.google.com/images?q="+encode+"&ei=UTF-8"; 
         } 
         else 
         { 
             return "http://images.search.yahoo.com/search/images?p="+encode+"&ei=UTF-8"; 
         } 
     } 
     else 
     { 
         //alert("err"); 
     } 
      
 } 
 function Button_Google_onclick()  
 { 
     window.open(GetUrl("google")); 
 } 
 function Button_Yahoo_onclick()  
 { 
     window.open(GetUrl("yahoo")); 
 } 
 // ]]> 
 </script> 
 </head> 
 <body> 
     <form id="form1" runat="server"> 
     <p> 
         <br /> 
         <br /> 
         <strong><span style="font-size: 24pt; color: #336633">Search<br /> 
         </span></strong> 
     </p> 
     <hr style="position: relative" /> 
         <br /> 
         <table style="left: 0px; position: relative; top: 0px"> 
             <tr> 
                 <td style="width: 31px; height: 21px"> 
                     <span style="font-family: Terminal">Key</span></td> 
                 <td style="width: 253px; height: 21px"> 
                     <input id="Text_Key" style="width: 248px; position: relative" type="text" /></td> 
                 <td style="width: 175px; height: 21px"> 
                     <asp:RadioButtonList ID="RadioButtonList_Kind" runat="server" RepeatDirection="Horizontal" 
                         Style="position: relative" Font-Names="terminal"> 
                         <asp:ListItem Selected="True">Web</asp:ListItem> 
                         <asp:ListItem>Mp3</asp:ListItem> 
                         <asp:ListItem>Image</asp:ListItem> 
                     </asp:RadioButtonList></td> 
             </tr> 
             <tr> 
                 <td style="width: 31px"> 
                 </td> 
                 <td colspan="2"> 
                     <input id="Button_Google" style="width: 80px; position: relative" type="button" value="Google" onclick="return Button_Google_onclick()" /> 
                               
                     <input id="Button_Yahoo" style="left: -29px; width: 104px; position: relative" type="button" 
                         value="Yahoo!" onclick="return Button_Yahoo_onclick()" /></td> 
         </table> 
         <br /> 
         <hr style="position: relative" /> 
         <asp:HyperLink ID="HyperLink_Home" runat="server" NavigateUrl="~/Default.aspx" Style="position: relative">Home</asp:HyperLink></form> 
 </body> 
 </html>

Nach dem Login kopieren

[Verwandte Empfehlungen]

1 . Kostenloses Javascript-Video-Tutorial

2. Detaillierte Einführung in die mehrwertige Bewegung des JavaScript-Bewegungsframeworks (4)

3. JavaScript-Freigabe von Beispielcodes für die Bewegung beliebiger Werte mehrerer Objekte im Bewegungsframework (3)

4. So lösen Sie das Anti-Shake-Problem und suspendierte Couplets in das JavaScript-Motion-Framework (2)

Wie löst das JavaScript-Motion-Framework das Problem der positiven und negativen Geschwindigkeitsrundung (1)

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Implementierung der Suchsymbolleiste über Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!