JS 实现百度搜索功能

时间：2022-09-20 23:30:19

　　今天我们来用JS实现百度搜索功能，下面上代码：

　　　　HTML部分：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <!--百度iocn图标-->

        <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>

        <title>百度一下,你就知道</title>

        <link rel="stylesheet" href="css/baidu.css" />

        <script src="js/H.js"></script>

    </head>

    <body onload="onloads(),randomBack()">

        <div class="box">

            <div class="box_log">

                <div class="box_log_img">

                    <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>

                </div>

            </div>

            <div class="box_text">

                <div class="box_text_content">

                    <input type="text" name="text" id="text" value="" autofocus="autofocus"/>

                    <input type="button" name="bdyx" id="btn" value="百度一下" />

                    <ul id="search">

                        <li class="li1" id="0" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="1" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="2" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="3" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="4" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="5" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="6" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="7" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="8" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="9" onclick="iptShow(this.id)"></li>

                    </ul>

                </div>

            </div>

        </div>

        <script type="text/javascript" src="js/index.js" ></script>

    </body>

</html>

　　　　CSS层叠样式部分：

body{/*清除浏览器自带样式*/

    margin: 0;

    padding: 0;

    /*background-repeat: no-repeat;*/

    min-width: 1200px;

}

.box{/*最大的盒子*/

    width: 100%;

    height: 100%;

    /*background: yellow;*/

    /*height: 636px;*/

}

.box_log{/*log盒子*/

    width: 100%;

    height: 250px;

    text-align: center;

}

.box_log_img{

    margin:0 auto;

    width: 300px;

    height: 150px;

}

.box_log img{

    width: 300px;

    height: 150px;

    margin-top: 38px;

    margin-bottom: 19px;

}

.box_text{/*text搜索框盒子大小*/

    width: 100%;

    height: 36px;

}

.box_text_content{

    width: 640px;

    height: 36px;

    margin: 0 auto;

}

#text{  /*input框的样式*/

    width: 540px;

    height: 36px;

    box-sizing: border-box;

    margin-top: 3px;

    text-indent: 4px;

    outline: none;

}

.log_img{/*input框中的小相机*/

    position: absolute;

    left: 62%;

    top: 35.5%;

}

#btn{  /*按钮的样式*/

    width: 100px;

    height: 36px;

    background: #3385FF;

    border: 0px;

    letter-spacing: 1px;

    color: white;

    margin-left: -5px;

    font-size: 15px;

    box-sizing: border-box;

    transform: translateY(1.5px);

    box-sizing: border-box;

}

#btn:hover{  /*当按钮hover的样式*/

    cursor: pointer;

}

#search{   /*搜索框的样式*/

    width: 540px;

    margin: 0;

    padding: 0;

    list-style: none;

    display: none;

    border: 1px solid #E3E5E4;

}

#search li{  /*搜索框li的大小颜色*/

    line-height: 36px;

    background: white;

}

#search li:hover{  /*当li hover的样式*/

    background: #F0F0F0;

}

.li1{ /*li中的值缩进*/

    text-indent: 4px;

}

　　　　JS部分：

var otext = document.getElementById("text");  //获取input框

ose = document.querySelector("#search");  //通过类名选择器 选择到search框

lis = document.getElementsByClassName("li1");  //获取所有的li

otext.onkeyup = function(){   //当在input框中键盘弹起发生事件

    ose.style.display = otext.value?"block":"none";  /*三目运算符,如果otext.value的值部位空,则block。*/

    var osc = document.createElement("script");  /*创建一个script标签*/

    osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";

    /*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/

    document.body.appendChild(osc);

    /*将创建好的script标签元素放入body中*/

    /*input框中按下回车根据input的值跳转页面*/

    if(event.keyCode==13){

        /*将百度作为连接,传入input的值,并跳入新的页面*/

        window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value

    }

}

var count = 0;

var search = 0;

var arr = ose.children; /*获取ose下的所有li*/

function houxiaowei(json){

    var jsonLength = 0;  /*json长度的初始值*/

//                    console.log(json.s);

    for(var x in json.s){   /*将循环的次数变成json的长度*/

        jsonLength++;

    }

//                    console.log(jsonLength);

    for(var i=0;i<lis.length;i++){

        if(jsonLength==0){  /*如果遍历出的长度等于0,li的值为空*/

            arr[i].innerHTML = null;

        }else{

            if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/

                arr[i].innerHTML = json.s[i];

            }

        }

    }

    if(count==lis.length-1){

        count=0;

        search=0;

    }

    count++;

    search++;

}

/*单击li中的值显示在input框中*/

function iptShow(thisId){

    otext.value = arr[thisId].innerHTML;

    window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value

}

otext.onclick = function(e){

    ose.style.display = "block";

    var e = event || window.event;

    e.stopPropagation();    //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容

    e.cancelBubble=true;  //阻止冒泡事件,IE8及以下兼容

//                alert(e);

}

/*单击body中的任意地方隐藏li*/

document.body.onclick = function(){

    ose.style.display = "none";

}

/*单击百度btn的时候触发,并跳到新的连接*/

var btn = document.querySelector("#btn");

cookies = [];

btn.onclick = function(){

    /*获取当前input的值*/

    var otext = document.getElementById("text").value;

    /*将百度作为连接,传入input的值,并跳入新的页面*/

    if(otext=="" || otext==null){

        window.location.href = "http://127.0.0.1:8020/%E7%99%BE%E5%BA%A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html?__hbt=1516599867084";

    }else{

        window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext

    }

}

/*加载页面input为空*/

function onloads(){

    var s = otext.value = null;

    $myId("text").focus();

}

function randomBack(){

    var randomBk = parseInt(Math.random()*545);

    document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)";

    document.body.style.backgroundSize = "100%";

}‘“

　　搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数

，它用来将json中的值提取出来放入li中。

　　　　今天就分享到这里~



　　
														
		
JS 实现百度搜索功能的更多相关文章
	

    

  1. 
原生JS实现百度搜索功能
		
    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
    
		
    2. 
						
  2. 
js&sol;jQuery实现类似百度搜索功能
		
    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
    
		
    3. 
						
  3. 
vue 使用watch监听实现类似百度搜索功能
		
    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
    
		
    4. 
						
  4. 
js 获取百度搜索关键词的代码
		
    有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...
    
		
    5. 
						
  5. 
js实现百度搜索框滑动固定顶部
		
    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
    
		
    6. 
						
  6. 
js搜索框 js仿百度搜索 js下拉框 jQuery&period;Autocomplete使用
		
    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
    
		
    7. 
						
  7. 
利用api模拟百度搜索功能
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    8. 
						
  8. 
用vue实现百度搜索功能
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. 
JS——模拟百度搜索
		
    注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...
    
		
    10. 
		


随机推荐
	

    

  1. 
Android成长日记-ViewPager的使用
			
    ViewPager在安卓应用中主要用于作为程序的引导页面,欢迎页面,以及其他的动画效果,下面将给你讲述ViewPager的使用 在Android3.0以上的Api中,提供了ViewPager的接口,所 ...
    
			
    2. 
						
  2. 
Java——复选框：JCheckBox
			
    import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ItemEvent; import java. ...
    
			
    3. 
						
  3. 
sqlite字符反向模糊查找
			
    sqlite 一个短字符要去db里模糊查找时,可以用like 如select * from t_contact where uphone like '%1234%'; 但是当输入的字符串超过数据库里的 ...
    
			
    4. 
						
  4. 
sort命令总结
			
    功能:排序 语法:sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符>][+<起始栏位>-<结束栏位>][--help][--ver ...
    
			
    5. 
						
  5. 
jquery验证表单是否满足正则表达式是否通过验证例子
			
    //验证通用函数 a表示元素对象,b表示正则表达式,c存bool值 function testyz(a,b,c){ c=false; $(a).on("blur",function ...
    
			
    6. 
						
  6. 
25&period; leetcode 217&period; Contains Duplicate
			
    217. Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your  ...
    
			
    7. 
						
  7. 
用css实现正方形div
			
    目标:实现一个正方形,这个正方形边长等于 方法一:使用单位vw, (ps我觉得这个是最简单的方法) html结构也很简单,只有一个div即可 <html> <body> &lt ...
    
			
    8. 
						
  8. 
python之参数解包
			
    # 参数解包:将整个list当做参数传给函数 list = [1, 2, 4] def add_fn(a, b, c): return a + b + c sum = add_fn(*list) pr ...
    
			
    9. 
						
  9. 
&lbrack;na&rsqb;TCP的三次握手四次挥手&sol;SYN泛洪
			
    1.TCP报文格式 上图中有几个字段需要重点介绍下: (1)序号:Seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标记. (2)确认序号:Ack序号,占32位, ...
    
			
    10. 
						
  10. 
C&plus;&plus;类模板 template &lt&semi;class T&gt&semi;
			
    C++在发展的后期增加了模板(template )的功能,提供了解决这类问题的途径.可以声明一个通用的类模板,它可以有一个或多个虚拟的类型参数. 比如: class Compare_int class ...
    
			
    11. 
			
相关文章