Heim > Artikel > Web-Frontend > Detailliertes Beispiel für die Implementierung der Suchsymbolleiste über Javascript

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

巴扎黑Original: 2017-05-22 11:46:091612Durchsuche

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>

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

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：Eine detaillierte Einführung in die Verwendung von Async und Wait in JavascriptNächster Artikel：Eine detaillierte Einführung in die Verwendung von Async und Wait in Javascript

In Verbindung stehende Artikel

Mehr sehen