百家搜索:在网站中添加Google、百度等搜索引擎

来源:http://www.ido321.com/1143.html

看到一些网站上添加了各种搜索引擎。如Google、百度、360、有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键字,找到了小窍门,于是乎,自家弄了一个百家搜索:

效果:

演示地址戳此:http://sousuodaquan.sinaapp.com/

ps:在列表中添加了糯米汇(http://www.nuomihui.com)的站内搜索,仅用于演示,别无它用,特此声明。

HTML代码:

<div class="sdiv">
        <form id="sform" method="get" target="_blank" action="http://www.baidu.com/s">
            <div class="mains">
                <ul id="selectul">
                    <li id="selectedli" style="background-color: white;">百度</li>
                    <li>百度</li>
                    <li>谷歌</li>
                    <li>必应</li>
                    <li>有道</li>
                    <li>搜搜</li>
                    <li>搜狗</li>
                    <li>360</li>
                    <li>爱淘宝</li>
                    <li>亚马逊</li>
                    <li>当当</li>
                    <li>知道</li>
                    <li>维基</li>
                    <li>Crea</li>
                    <li class="lastli">糯米汇</li>

                </ul>
                <input type="text" name="wd" id="findParam"/>
            </div>
            <input type="submit" value="搜索" id="btn" />
        </form>
        <h4 style="margin-left:100px">出处:<a href="http://www.ido321.com/" target="_blank">淡忘~浅思</a></h4>
    </div>

JavaScript:

window.onload = function()
        {
            var selectul = document.getElementById(‘selectul‘);
            var lis = selectul.getElementsByTagName(‘li‘);
            var selectedli = document.getElementById(‘selectedli‘);
            var findParam = document.getElementById(‘findParam‘);
            var sform = document.getElementById("sform");
            var lislen = lis.length;
            for (var i = 0; i < lislen; i++) {
                lis[i].onmouseover=function()
                {
                    selectul.style.overflow = "visible";
                };
                lis[i].onmouseout=function()
                {
                    selectul.style.overflow = "hidden";
                };
                lis[i].onclick = function()
                {
                    selectedli.innerHTML = this.innerHTML;
                    switch(this.innerHTML)
                    {
                        case "百度":
                             findParam.name=‘wd‘;
                             sform.action = "http://www.baidu.com/s";
                             break;
                        case "谷歌":
                             findParam.name=‘q‘;
                              sform.action = "http://www.google.com.hk/search";
                             break;
                        case "必应":
                             findParam.name=‘q‘;
                              sform.action = "http://cn.bing.com/search";
                             break;
                        case "有道":
                             findParam.name=‘query‘;
                              sform.action = "http://www.sogou.com/web";
                             break;
                        case "搜搜":
                             findParam.name=‘w‘;
                              sform.action = "http://www.soso.com/q";
                             break;
                        case "搜狗":
                             findParam.name=‘q‘;
                              sform.action = "http://www.youdao.com/search";
                             break;
                        case "360":
                             findParam.name=‘q‘;
                              sform.action = "http://www.youdao.com/search";
                             break;
                        case "爱淘宝":
                             findParam.name=‘key‘;
                              sform.action = "http://ai.taobao.com/search/index.htm";
                             break;
                         case "亚马逊":
                             findParam.name=‘field-keywords‘;
                              sform.action = "http://www.amazon.cn/s/ref=nb_sb_noss";
                             break;
                         case "当当":
                             findParam.name=‘key‘;
                              sform.action = "http://search.dangdang.com/";
                             break;
                         case "知道":
                             findParam.name=‘word‘;
                              sform.action = "http://zhidao.baidu.com/search";
                             break;
                         case "维基":
                             findParam.name=‘search‘;
                              sform.action = "ttp://zh.wikipedia.org/w/index.php";
                             break;
                         case "Crea":
                             findParam.name=‘q‘;
                              sform.action = "http://search.creativecommons.org/";
                             break;
                         case "糯米汇":
                             findParam.name=‘s‘;
                              sform.action = "http://www.nuomihui.com/";
                             break;
                    }
                    selectul.style.overflow = "hidden";
                };
            };
        };

下一篇:关于坛友的一个布局问题的解答

时间: 2024-08-06 11:54:01

百家搜索:在网站中添加Google、百度等搜索引擎的相关文章

【前端】向blog或网站中添加语法高亮显示代码方法总结

向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在IDE或专业编译器一样能够高亮显示在网页或博客中(如下图显示),上网查了很多资料,下面是我对学习到的方法的归纳总结. 下面的方法基本上都是利用第三方javascript插件实现的,因此不必担心方法有多难,只要拿过来使用就可以了.在讲述方法之前先介绍一下与之条件: 预备知识 HTML和CSS的基本知识 目

创建Windows Azure网站,使用FTP客户端在网站中添加页面

创建Windows Azure网站 创建web site非常简单,直接上图 FTP的用户名,千万不要搞错了是网站名称\用户名,这样的格式 你可以从截图中看到我添加test.asp作为新的默认页面. azure网站支持php5.3/5.4/5.5, 也支持java 创建Windows Azure网站,使用FTP客户端在网站中添加页面,布布扣,bubuko.com

bootstrap设计网站中添加代码高亮插件

这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/google-code-prettify/prettify.css http://codecloud.sinaapp.com/google-code-prettify/prettify.js (2)在head中引入这两个文件 <link href="google-code-prettify/p

如何在网站中添加音乐

来源:http://www.ido321.com/1042.html 发现有很多的个人博客中添加了背景音乐,以增强用户体验.LZ搜集到了两种在网站中添加音乐的方式. 一.豆瓣的FM         这个非常简单,一段代码就可以实现. <p> <iframe name="iframe_canvas" src="http://douban.fm/partner/baidu/doubanradio" height="200" widt

在网站中添加百度地图

怎样在网站中引用百度地图? 1.在html中添加一个div,添加一些样式. <div id="divMap" style="width:50%;height:300px;border:1px solid gray;"></div> 2.在head中添加对百度地图的引用. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.

电商网站中添加商品到购物车功能模块2017.12.8

前言: 电商网站中添加商品到购物车功能模块实现: 根据前一篇博客的介绍,我们看到淘宝网站为了保证购物车数据的同步,直接是强制用户必须登录才可以将商品加入购物车.而京东网站是用户在未登录的状态下也可以将商品加入到购物车,此时这个是保存在了cookie中,然后用户登录后,根据商品的id判断商品是否存在,将两个购物车的商品合并,形成最终的购物车商品. 本篇文章分两个模块,分别看下这两个功能是如何实现的: 1.必须在用户登录的前提下,才可以将商品加入到购物车列表 我们今天先看下淘宝网站的状态下的添加商品

在网页中添加google搜索

网页中插入谷歌搜索,至于怎么上谷歌,后面有时间会更,推荐百度 1 <form method="GET" action="http://www.google.com.hk/search" class="form-group">//name属性不能更改 否则无法提交问题跳转到检索的页面,而是直接调到Google搜索的主界面 2 <input type="text" class="form-control

zen-cart网站页面添加google翻译

很多浏览器都有自动翻译网页的功能,比如Google Chrome,其实通过google api接口也可以在zen-cart网站页面上添加一个翻译的选择框, 效果图如下: 下面是需要添加的代码: ! Start Google Tra 很多浏览器都有自动翻译网页的功能,比如Google Chrome,其实通过google api接口也可以在zen-cart网站页面上添加一个翻译的选择框,效果图如下: 下面是需要添加的代码: <!– Start Google Translator / Language

spring中添加google的guava缓存(demo)

1.pom文件中配置 <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>4.2.4.RELEASE</version> </dependency> <dependency> <group