JavaScript切换搜索引擎的导航网页搜索框实例代码

废话不多说了，直接给大家贴代码了，具体代码如下所述：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style>
    #search ul {
      list-style-type: none;
      display: block;
      width: 100px;
      height: 33px;
      margin: 0;
      padding: 0;
      border: 0px;
      float: left;
    }
    #search li {
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
    #search .selected {
      display: block;
    }
    #search form {
      margin: 0px;
      padding: 0px;
    }
    #search input {
      height: 30px;
      width: 400px;
      margin: 0px;
    }
    #search .button {
      font-size: 17px;
      font-weight: 600;
      color: #002D96;
      height: 30px;
      width: 110px;
      margin-left: 50px;
      background: #e6efc2;
      opacity: 0.8;
      border: #7fb80e 1px solid;
      cursor: pointer;
      -webkit-border-radius: 2px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
<div id="search" align="center">
  <table>
    <tr>
      <td>
        <ul>
          <li style="display:block;"><img width="80" src="https://www.baidu.com/img/bd_logo1.png"/></li>
          <li style="display:none;"><img width="80" src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"/></li>
          <li style="display:none;"><img width="80" src="https://www.sogou.com/images/logo2014/error180x60.png"/></li>
        </ul>
      </td>
      <td id="from_box" style="padding-left:10px;">
        <form id="from_baidu" style="display:block" action="http://www.baidu.com/baidu" target="_blank" method="get">
          <input name="" type="hidden" value="baidu"/>
          <input type="text" name="word"/>
          <input class="button" type="submit" value="百度一下" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
        </form>
        <form id="from_google" style="display:none" action="http://www.google.com/search" target="_blank" method="get">
          <input type="text" name="q"/>
          <input class="button" type="submit" value="google搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
        </form>
        <form id="from_sougou" style="display:none" action="http://www.sogou.com/web" target="_blank" name="sogou_queryform">
          <input type="text" name="query">
          <input class="button" type="submit" value="sougou搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
        </form>
      </td>
    </tr>
  </table>
</div>
<script>
  var search = document.getElementById("search");
  var formbox = document.getElementById('from_box');
  var forms = formbox.getElementsByTagName("form");
  var ul = search.getElementsByTagName("ul")[0];
  var li = ul.getElementsByTagName("li");
  var length = li.length;
  li[0].onclick = function() {
    for(var i = 1; i < length; i++) {
      li[i].style.display = "block";
    }
  }
  var n = 0; //第一个显示表单的位置
  for(var i = 1; i < length; i++) {
    li[i].onclick = function(a) {
      return function() {
        //交换显示的html内容
        var temp = li[0].innerHTML;
        li[0].innerHTML = this.innerHTML;
        this.innerHTML = temp;
        for(var j = 1; j < length; j++) {
          li[j].style.display ="none";
        }
        //交换表单的显示
        //alert(li[0].innerHTML.substring(37,7));
        //alert(li[0].innerHTML.indexOf('baidu'));
        hidden_from(); //隐藏表单
        if(li[0].innerHTML.indexOf('baidu') > 0) {
          document.getElementById('from_baidu').style.display = 'block';
        } else if(li[0].innerHTML.indexOf('google') > 0) {
          document.getElementById('from_google').style.display = 'block';
        } else if(li[0].innerHTML.indexOf('sougou') > 0) {
          document.getElementById('from_sougou').style.display = 'block';
        }
        //alert(this.innerHTML);
        //forms[n].style.display = "none";
        //forms[a].style.display = "block";
        //n = a;
      }
    }(i);
    li[i].onmouseover = function() {
      this.style.border ="#7fb80e 1px solid";
      this.style.background ="#f2eada";
    }
    li[i].onmouseout = function() {
      this.style.border = "0px";
      this.style.background = "inherit";
    }
  }
  //隐藏搜索框表单的函数
  function hidden_from() {
    for(var j = 0; j < forms.length; j++) {
      forms[j].style.display = "none";
    }
  }
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript切换搜索引擎的导航网页搜索框实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 基于Vue.js实现简单搜索框

    基于Vue.js实现简单搜索框

    在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search 主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果 这里有两个组件,一个组件是logo部分的,一个是搜索框部分的. html html很简单,就是引用两个组件. <div id="app"> <logo-pic

  • 自动完成的搜索框javascript实现

    自动完成的搜索框javascript实现

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!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">

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu

  • Angularjs material 实现搜索框功能

    angular-material 是 AngularJS 的一个子项目,用来提供实现了 Material Design 风格的组件. Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面.但在实际使用的过程中并不总是能满足我们的需求.开发一个组件就成了我们必须学习的内容. 下面是一个组件的实现: //前面省略若干代码 directive('mdSearchInput',[f

  • JavaScript切换搜索引擎的导航网页搜索框实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> #search ul { list-style-type: none; display: block; width: 100px; height

  • jQuery实现的类似淘宝网站搜索框样式代码分享

    jQuery实现的类似淘宝网站搜索框样式代码分享

    运行效果图:                                                ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的类似淘宝网站搜索框样式代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • javascript实现checkbox复选框实例代码

    本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

  • 微信小程序 搜索框组件代码实例

    这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon>

  • 基于jQuery实现弹出可关闭遮罩提示框实例代码

    基于jQuery实现弹出可关闭遮罩提示框实例代码

    jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果演示 关键代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • 使用Java和WebSocket实现网页聊天室实例代码

    使用Java和WebSocket实现网页聊天室实例代码

    在没介绍正文之前,先给大家介绍下websocket的背景和原理: 背景 在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况,HTML5定义了WebSocket协议,能更

  • Android 百度地图POI搜索功能实例代码

    Android 百度地图POI搜索功能实例代码

    在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这三个字母,决定认认真真的搜索一些POI具体的含义. POI是英文的缩写,原来的单词是point of interest, 直译成中文就是兴趣点的意思.兴趣点这个词最早来自于导航地图厂商.地图厂商为了提供尽可能多的位置信息,花费了很大的精力去寻找诸如加油站,餐馆,酒店,景点等目的地,这些目的地其实都可

  • Android AutoCompleteTextView自动提示文本框实例代码

    Android AutoCompleteTextView自动提示文本框实例代码

    自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 最后一张获取文本框里面的值(其实就跟TextView.EditText一样): 首先,在xml中定义AutoCompleteTextView控件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r

  • 纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: n

  • Bootstrap与Angularjs的模态框实例代码

    Bootstrap与Angularjs的模态框实例代码

    先给大家展示下效果图,感兴趣的朋友参考下实现代码吧 效果图如下所示: 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.

随机推荐