Maison >interface Web >js tutoriel >Exemple détaillé d'implémentation de la barre d'outils de recherche via javascript

Exemple détaillé d'implémentation de la barre d'outils de recherche via javascript

巴扎黑original: 2017-05-22 11:46:091665parcourir

Un : Effet final
Exemple détaillé d'implémentation de la barre d'outils de recherche via javascript

Deux : Principe

Si vous recherchez "Chine" dans Yahoo, Ensuite, vous obtiendrez une chaîne d'adresses comme celle-ci dans la barre d'adresse du navigateur : 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=
Cela a l'air un peu compliqué, veuillez le simplifier : http://search.cn.yahoo.com/search ?&p= %D6%D0%B9%FA
C'est la clé Où &p=%D6%D0%B9%FA est le paramètre de mot-clé de la recherche, et %D6%D0%B9%FA est "Chine". "
Encodage de l'URL. OK, tant que nous pouvons construire un tel codage.

Trois : encodage d'URL
La fonction encodeURIComponent() de JavaScript peut terminer le travail d'encodage.
Par exemple, dans l'exemple ci-dessus, nous pouvons utiliser "http://search.cn.yahoo.com/search?&p="+encodeURIComponent("China");

Quatre : Code
(Cliquez sur le signe plus pour développer)

Le code est le suivant :

 <%@ 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>

[Recommandations associées]

1. Tutoriel vidéo gratuit Javascript

2 Introduction détaillée au mouvement à valeurs multiples du framework de mouvement JavaScript (4)

3. Partage JavaScript d'un exemple de code pour le mouvement de valeurs arbitraires multi-objets dans le cadre de mouvement (3)

4 Comment résoudre le problème d'anti-tremblement et les distiques suspendus en JavaScript. framework de mouvement (2)

5. Comment le framework de mouvement JavaScript résout-il le problème de l'arrondi de vitesse positif et négatif (1)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une introduction détaillée à l'utilisation d'async et d'attente en JavascriptArticle suivant：Une introduction détaillée à l'utilisation d'async et d'attente en Javascript

Articles Liés

Voir plus