JavaScript实现谷歌,百度切换搜索功能
2011-03-31 17:16
911 查看
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none} body{} a{text-decoration:none;color:#333;} #search{font-size:12px;border:1px solid orange;width:600px;margin:50px auto;overflow:hidden} #nav {height:20px} #nav li{float:left;padding:0 10px} #logo{float:left;width:64px;height:64px;overflow:hidden} .search_c{width:500px;float:right} .text{clear:both} #text{width:280px;height:25px;color:#ccc} img{border:none;} </style> <script type="text/javascript"> var g; function text(which){ for(var i=0; i<which.elements.length; i++){ var inp = which.elements[i]; if(inp.type == "button"){ continue; } inp.onfocus = function (){ if(this.value == this.defaultValue){ this.value = ""; this.style.color = "#000"; } } inp.onblur = function(){ if(this.value == "" || this.value.length <= 0){ this.value = this.defaultValue; this.style.color = "#ccc"; } } } } function biaodan(){ for(var j=0; j<document.forms.length; j++){ text(document.forms[j]) } } function nav(target,g){ var href = target.getAttribute("href"); var img = document.getElementById("img"); img.setAttribute("src",href); if(g == "google"){ document.getElementById("bt").onclick = function(){ google(); } } else{ document.getElementById("bt").onclick = function(){ baidu(); } } } function google(){ woman = document.getElementById('text').value; window.location.href="http://www.google.com.hk/search?hl=zh-CN&source=hp&biw=1024&bih=625&q="+woman+"&btnG=Google+%CB%D1%CB%F7&aq=f&aqi=&aql=&oq="; } function baidu(){ woman = document.getElementById('text').value; window.location.href="http://www.baidu.com/s?tn=monline_dg&bs=%E8%F3%B5%D9%B8%D4%B6%B9%B8%AF%B8%C9&f=8&wd="+woman; } </script> </head> <body> </body> <div id="search"> <h1 id="logo"> <a href=""><img src="images/google.jpeg" id="img" /></a> </h1> <div class="search_c"> <div id="nav"> <ul> <li><a href="http://images.cnblogs.com/cnblogs_com/blueDream2011/291172/o_google.jpg" onclick="nav(this,'google');return false">谷歌</a></li> <li><a href="http://images.cnblogs.com/cnblogs_com/blueDream2011/291172/o_baidu.png" onclick="nav(this,'baidu');return false">百度</a></li> </ul> </div> <div class="text"> <form action="" method="post"> <input type="text" id="text" name="text" value="请输入您要搜索的内容!" /> <input type="button" value="搜索" id="bt" /> </form> </div> </div> <script type="text/javascript">biaodan();</script> </div> </html>
相关文章推荐
- ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
- JavaScript实现百度搜索suggestion功能
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- javascript搜索自动提示功能的实现第1/3页
- bootstrap实现的类似百度搜索的输入框自动完成功能(动态获取数据库的值)
- javascript回车完美实现tab切换功能
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- selenium结合sikuli实现百度的图片搜索功能
- javascript实现划词标记+划词搜索功能
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
- 原生javascript实现Tab选项卡切换功能
- java Swing模仿百度搜索功能的实现
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
- 运用ajax实现仿谷歌搜索输入提示功能(c#)
- vs2008 asp.net ajax控件实现百度,谷歌智能搜索
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
- javascript实现划词标记+划词搜索功能
- jquery实现的类似百度搜索的输入框自动完成功能
- javascript实现划词标记+划词搜索功能