当前位置：首页 → 问答吧 → 搜索引擎集合

搜索引擎集合

时间：2010-06-01

来源：互联网

刚做的一个单子，做了一个搜索引擎集合的搜索框。js还是新手，只用操作DOM的Js编程...

===================================================
更新，多谢楼下几位发现bug,今天忽然发现两个问题，已经修正了...
希望各位继续发现问题并提出，感谢。
===================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>搜索引擎集合:网页音乐图片新闻视频地图购物</title> <style> a{ text-decoration:none; color:#999; } a:hover{ color:#444; } .top_search{ height:250px; width:420px; margin:0 auto; padding:50px; background:#f5f5f5; font-size:12px; } .top_search ul{ overflow:hidden; padding:0px; } .top_search li{ display:block; float:left; list-style:none; padding-right:10px; margin-right:10px; border-right:1px solid #e5e5e5; } .top_search .current a{ color:#000; } .hide{ display:none; } .search_box{ clear:left; width:300px; } .top_search p{ margin-top:50px; } </style> </head> <body> <div class="top_search" id="top_search"> <ul> <li class="current"><a href="#webSearch">网页</a></li> <li><a href="#musicSearch">音乐</a></li> <li><a href="#imgSearch">图片</a></li> <li><a href="#newsSearch">新闻</a></li> <li><a href="#videoSearch">视频</a></li> <li><a href="#mapSearch">地图</a></li> <li><a href="#shoppingSearch">购物</a></li> </ul> <form name="searchForm" id="searchForm" target="_blank" method="get" action="http://www.google.cn/search"> <input type="text" autocomplete="off" size="33" name="q" class="search_box" id="sbox"> <input type="submit" value="Go" name="sa" class="search_btn"> <div class="select"> <label> <input type="radio" class="web1" name="webSearch" > <span>百度</span> </label> <label> <input type="radio" class="web2" name="webSearch" checked="checked"> <span>谷歌</span> </label> </div> <div class="hide"> <label> <input type="radio" class="music1" name="musicSearch" > <span>百度MP3</span> </label> <label> <input type="radio" class="music2" name="musicSearch" checked="checked"> <span>谷歌音乐</span> </label> </div> <div class="hide"> <label> <input type="radio" class="img1" name="imgSearch" > <span>百度图片</span> </label> <label> <input type="radio" class="img2" name="imgSearch" checked="checked"> <span>谷歌图片</span> </label> </div> <div class="hide"> <label> <input type="radio" class="news1" name="newsSearch" > <span>百度新闻</span> </label> <label> <input type="radio" class="news2" name="newsSearch" checked="checked"> <span>Google News</span> </label> </div> <div class="hide"> <label> <input type="radio" class="video1" name="videoSearch" > <span>百度视频</span> </label> <label> <input type="radio" class="video2" name="videoSearch" checked="checked"> <span>谷歌视频</span> </label> </div> <div class="hide"> <label> <input type="radio" class="map1" name="mapSearch" > <span>百度地图</span> </label> <label> <input type="radio" class="map2" name="mapSearch" checked="checked"> <span>谷歌地图</span> </label> </div> <div class="hide"> <label> <input type="radio" class="shopping1" name="shoppingSearch" > <span>卓越</span> </label> <label> <input type="radio" class="shopping2" name="shoppingSearch" checked="checked"> <span>淘宝</span> </label> </div> </form> <p> 提示:Js使用硬编码，修改了id或class值之后，相应的js里面的值也要修改。 </p> </div> <script> /* Written by Aben Blog:http://eishy.com(最近在更换空间，有可能访问不了或者打开twitter第三版网页客户端。) Twitter:http://twitter.com/csser E-mail/Gtalk:[email protected] 欢迎各位改进。 */ function searchFrom(){ var seForm = document.getElementById("searchForm"); var topSearch = document.getElementById("top_search"); var oLi = topSearch.getElementsByTagName("li"); var oDiv = topSearch.getElementsByTagName("div"); var sBox = document.getElementById("sbox"); var se0 = oDiv[0].getElementsByTagName("input")[0]; var se1 = oDiv[1].getElementsByTagName("input")[0]; var se2 = oDiv[2].getElementsByTagName("input")[0]; var se3 = oDiv[3].getElementsByTagName("input")[0]; var se4 = oDiv[4].getElementsByTagName("input")[0]; var se5 = oDiv[5].getElementsByTagName("input")[0]; var se6 = oDiv[6].getElementsByTagName("input")[0]; oLi[0].onclick = function(){ if(se0.getAttribute("class") == "se"||se0.getAttribute("className")){ seForm.action = "http://www.baidu.com/s"; sBox.name = "word"; }else{ seForm.action = "http://www.google.cn/search"; sBox.name = "q"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } oLi[1].onclick = function(){ if(se1.getAttribute("class") == "se"||se1.getAttribute("className")){ seForm.action = "http://mp3.baidu.com/m"; sBox.name = "word"; }else{ seForm.action = "http://www.google.cn/music/search"; sBox.name = "q"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } oLi[2].onclick = function(){ if(se2.getAttribute("class") == "se"||se2.getAttribute("className")){ seForm.action = "http://image.baidu.com/i"; sBox.name = "word"; }else{ seForm.action = "http://images.google.cn/images"; sBox.name = "q"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } oLi[3].onclick = function(){ if(se3.getAttribute("class") == "se"||se3.getAttribute("className")){ seForm.action = "http://news.baidu.com/ns"; sBox.name = "word"; }else{ seForm.action = "http://news.google.cn/news/search"; sBox.name = "q"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } oLi[4].onclick = function(){ if(se4.getAttribute("class") == "se"||se4.getAttribute("className")){ seForm.action = "http://video.baidu.com/v"; sBox.name = "word"; }else{ seForm.action = "http://video.google.cn/videosearch"; sBox.name = "q"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } oLi[5].onclick = function(){ if(se5.getAttribute("class") == "se"||se5.getAttribute("className")){ seForm.action = "http://map.baidu.com/m"; sBox.name = "word"; }else{ seForm.action = "http://ditu.google.cn/maps"; sBox.name = "q"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } oLi[6].onclick = function(){ if(se6.getAttribute("class") == "se"||se6.getAttribute("className")){ seForm.action = "http://www.amazon.cn/search/search.asp"; sBox.name = "word"; }else{ seForm.action = "http://search8.taobao.com/browse/search_auction.htm"; sBox.name = "word"; } for(var j=0;j<oLi.length;j++){ oLi[j].className = ""; } this.className = "current"; for(var k=0;k<oDiv.length;k++){ if(oLi[k].getAttribute("class") == "current"||oLi[k].getAttribute("className") == "current"){ oDiv[k].className = "select"; }else{ oDiv[k].className = "hide"; } } return false; } for(var i=0;i<seForm.elements.length;i++){ var element = seForm.elements[i]; if(element.getAttribute("class") == "web1"||element.getAttribute("className") == "web1"){ element.onclick = function(){ seForm.action = "http://www.baidu.com/s"; sBox.name = "word"; se0.className = "se"; } } if(element.getAttribute("class") == "web2"||element.getAttribute("className") == "web2"){ element.onclick = function(){ seForm.action = "http://www.google.cn/search"; sBox.name = "q"; se0.className = "web1" } } if(element.getAttribute("class") == "music1"||element.getAttribute("className") == "music1"){ element.onclick = function(){ seForm.action = "http://mp3.baidu.com/m"; sBox.name = "word"; se1.className = "se"; } } if(element.getAttribute("class") == "music2"||element.getAttribute("className") == "music2"){ element.onclick = function(){ seForm.action = "http://www.google.cn/music/search"; sBox.name = "q"; se1.className = "music1"; } } if(element.getAttribute("class") == "img1"||element.getAttribute("className") == "img1"){ element.onclick = function(){ seForm.action = "http://image.baidu.com/i"; sBox.name = "word"; se2.className = "se"; } } if(element.getAttribute("class") == "img2"||element.getAttribute("className") == "img2"){ element.onclick = function(){ seForm.action = "http://images.google.cn/images"; sBox.name = "q"; se2.className = "img1"; } } if(element.getAttribute("class") == "news1"||element.getAttribute("className") == "news1"){ element.onclick = function(){ seForm.action = "http://news.baidu.com/ns"; sBox.name = "word"; se3.className = "se"; } } if(element.getAttribute("class") == "news2"||element.getAttribute("className") == "news2"){ element.onclick = function(){ seForm.action = "http://news.google.cn/news/search"; sBox.name = "q"; se3.className = "news1"; } } if(element.getAttribute("class") == "video1"||element.getAttribute("className") == "video1"){ element.onclick = function(){ seForm.action = "http://video.baidu.com/v"; sBox.name = "word"; se4.className = "se"; } } if(element.getAttribute("class") == "video2"||element.getAttribute("className") == "video2"){ element.onclick = function(){ seForm.action = "http://video.google.cn/videosearch"; sBox.name = "q"; se4.className = "video1"; } } if(element.getAttribute("class") == "map1"||element.getAttribute("className") == "map1"){ element.onclick = function(){ seForm.action = "http://map.baidu.com/m"; sBox.name = "f"; se5.className = "se"; } } if(element.getAttribute("class") == "map2"||element.getAttribute("className") == "map2"){ element.onclick = function(){ seForm.action = "http://ditu.google.cn/maps"; sBox.name = "q"; se5.className = "map1"; } } if(element.getAttribute("class") == "shopping1"||element.getAttribute("className") == "shopping1"){ element.onclick = function(){ seForm.action = "http://www.amazon.cn/search/search.asp"; sBox.name = "searchWord"; se6.className = "se"; } } if(element.getAttribute("class") == "shopping2"||element.getAttribute("className") == "shopping2"){ element.onclick = function(){ seForm.action = "http://search8.taobao.com/browse/search_auction.htm"; sBox.name = "word"; se6.className = "shopping"; } } } } window.onload = searchFrom; </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 tntaben 于 2010-6-5 20:06 编辑 ]

作者: tntaben 发布时间: 2010-06-01

很不错了·····

作者: bcz0515 发布时间: 2010-06-02

非常不错，学习了

作者: ki188 发布时间: 2010-06-02

确实很不错

作者: cielkong 发布时间: 2010-06-03

写得不错，继续加油

作者: shbijiben 发布时间: 2010-06-03

百度地图的word="f"...不是很明白这个属性是干什么的

作者: tntaben 发布时间: 2010-06-03