JavaScript切换搜索引擎的导航网页搜索框实例代码
时间:2019-03-30
本文章向大家介绍JavaScript切换搜索引擎的导航网页搜索框实例代码,主要包括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切换搜索引擎的导航网页搜索框实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
- Golang语言之defer-再议
- HDUOJ------Lovekey
- 转-带交互的telnet小工具,golang版
- 需要了解的pssh(r11笔记第28天)
- 二分查找算法基本思想
- Flyod 算法(两两之间的最短路径)
- HDUOJ-4104 Discount
- HDUOJ-----1085Holding Bin-Laden Captive!
- HDUOJ-----1098 Ignatius's puzzle
- 转--shell脚本备份mysql数据库
- NYOJ——————数的长度(斯特林公式的应用)
- 关于ssh命令的几个使用小技巧(r11笔记第27天)
- Golang语言社区--消息触发服务器启动基础模块分享
- NYOJ------汉诺塔(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 面试题系列第8篇:谈谈String、StringBuffer、StringBuilder的区别?
- HTTP协议的请求与数据抓包
- Ubuntu 18.04 LTS 通过 Netplan 配置网络教程
- 【kafka源码】kafka内部的一些术语
- TKE使用自建NFS持久化存储
- 网站 SSL 检测 PCI DSS 不合规解决办法
- leetcode链表之分割链表
- 五分钟带你读懂 TCP全连接队列(图文并茂)
- Python基础
- JDK15正式发布,新增功能预览!
- Magicodes.IE 2.3重磅发布——.NET Core开源导入导出库
- 安防视频监控系统视频上云解决方案EasyCVR音频基础知识介绍
- 安防视频监控系统视频上云解决方案EasyCVR语音转发功能音频数据打包发送流程介绍
- 视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?
- 什么是MySQL数据库?看这一篇干货文章就够了!