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


Posted in Javascript onJune 11, 2017

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

<!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切换搜索引擎的导航网页搜索框实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
详解Angular4中路由Router类的跳转navigate
Jun 09 #Javascript
基于vue2.0实现的级联选择器
Jun 09 #Javascript
JavaScript设计模式之代理模式详解
Jun 09 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
PHP学习之整理字符串
2011/04/17 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
JSONP基础知识详解
2017/03/19 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
什么是Python变量作用域
2020/06/03 Python
Python如何输出百分比
2020/07/31 Python
python如何绘制疫情图
2020/09/16 Python
python Xpath语法的使用
2020/11/26 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
协议书样本
2014/04/23 职场文书
写得不错的求职信范文
2014/07/11 职场文书
先进基层党组织材料
2014/12/25 职场文书
土地租赁协议书
2015/01/29 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
父亲去世追悼词
2015/06/23 职场文书
航班延误投诉信
2015/07/02 职场文书
校运会新闻稿
2015/07/17 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript