JavaScript实现百度搜索页面

HTML

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <!--引入百度icon小图标-->

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

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

    </head>

    <body>

        <div class="bj">

            <div class="logo_d">

                <img src="img/logo.png" class="logo">

            </div>

            <div class="bd_k">

                <input type="text" id="input">

                <i class="iconfont"></i>

                <button id="btn">百度一下</button>

            </div>

            <!--ul li-->

            <div class="ul_d">

                <ul id="ul" style="display:none;">

                    <li class="li"></li>

                    <li class="li"></li>

                    <li class="li"></li>

                </ul>

            </div>

        </div>

        <!--鼠标跟随-->

        <div id="to_top"></div>

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

    </body>

</html>

CSS

/*引在线icon小图标*/

@font-face {

  font-family: 'iconfont';  /* project id 548708 */

  src: url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.eot');

  src: url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.eot?#iefix') format('embedded-opentype'),

  url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.woff') format('woff'),

  url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.ttf') format('truetype'),

  url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.svg#iconfont') format('svg');

}

i{

    font-family: 'iconfont';

    /*去掉图标的默认样式(斜体)*/

    font-style: normal;

}

.iconfont{

    font-family: 'iconfont';

    font-size: 23px;

    color: gray;

    position:absolute;

    top:184px;

    right:493px;

}

.iconfont:hover{

    color: deepskyblue;

    cursor:pointer;

}

*{

    margin:0;

    padding:0;

}

body,html{

    width:100%;

    overflow:hidden;

}

/*鼠标跟随*/

#to_top{

        position:absolute;

        cursor:pointer;

        width: 35px;

        height: 30px;

        background-image: url(../img/猫.png);

        background-size:100% 100%;

}

/*背景*/

.bj{

    width:100%;

    height:768px;

    /*background-color:red;*/

    background-image: url(../img/1F613111001-4.jpg);

    /*设置背景图片透明度*/

    opacity:0.8;

    background-size:100% 100%;

    overflow:hidden;

}

/*内容*/

.logo_d{

    width:260px;

    height:125px;

    /*background-color:red;*/

    margin:0px auto;

    margin-top:40px;

    margin-bottom:10px;

}

.logo{

    height:125px;

}

.bd_k{

    width:650px;

    height:42px;

    /*background-color:yellow;*/

    margin:0 auto;

}

#input{

    width:521px;

    height:38px;

    outline:none;

    font-size:16px;

    text-indent:8px;

    float:left;

}

#btn{

    width:125px;

    height:42px;

    background-color:deepskyblue;

    border:1px solid deepskyblue;

    float:right;

    font-size:18px;

    color:white;

    outline:none;

    cursor:pointer;

}

#btn:hover{

    background-color:dodgerblue;

    border:1px solid dodgerblue;

}

.ul_d{

    width:649px;

    height:120px;

    /*background-color:yellow;*/

    margin:0 auto;

}

#ul{

    list-style:none;

    width:521px;

    /*background-color:red;*/

    border:1px solid #ededed;

    margin-top:-2px;

}

#ul li{

    line-height:32px;

    text-indent:8px;

}

#ul li:hover{

    background-color:rgba(30,144,255,0.6);

    cursor:pointer;

}

JS

var btn=document.getElementById("btn");

var ipt=document.getElementById("input");

//获取每个li作为一个数组

var arr=document.getElementsByTagName("li");

//点击事件

btn.onclick=function(){

    //获取ul的id,并且修改它的属性.(显示)

    var ul=document.getElementById("ul");

    ul.setAttribute("style","display:block;");

    //给下拉input传值

    for(var i=arr.length-1;i>=0;i--){

        if(i==0){

            arr[i].innerText=document.getElementById("input").value;

        }else{

            arr[i].innerText=arr[i-1].innerText;

        }

    }

}

//键盘弹起发生事件

//ipt.onkeyup=function(){

//    //获取ul的id,并且修改它的属性.(显示)

//    var ul=document.getElementById("ul");

//    ul.setAttribute("style","display:block;");

//    //给下拉input传值

//    for(var i=arr.length-1;i>=0;i--){

//        if(i==0){

//            arr[i].innerText=document.getElementById("input").value;

//        }else{

//            arr[i].innerText=arr[i-1].innerText;

//        }

//    }

//}

//input获取焦点事件

ipt.onfocus=function(){

    var ul=document.getElementById("ul");

    ul.setAttribute("style","display:block;");

}

//input失去焦点事件

ipt.onblur=function(){

    var ul=document.getElementById("ul");

    ul.setAttribute("style","display:none;");

}

//鼠标li所选中的下拉值再赋值给input

for(var x of arr){

    x.onmousedown=zhi;

}

function zhi(){

    ipt.value=this.innerText;

}

//鼠标跟随

window.onload = function(){

     var oTop = document.getElementById("to_top");

     document.onmousemove = function(evt){

      var oEvent = evt || window.event;

      var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;

      var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

      oTop.style.left = oEvent.clientX + scrollleft +10 +"px";

      oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";

 }

} 

JavaScript实现百度搜索页面的更多相关文章

  1. 教你编写百度搜索广告过滤的chrome插件

    1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...

  2. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  3. Vue调用百度接口做百度搜索

    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...

  4. Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...

  5. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  6. 仿百度搜索（AJAX）

    <h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...

  7. jsonp跨越请求百度搜索api 实现下拉列表提示

    题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一 ...

  8. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  9. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. opencv边缘检测报错

    cnts = cv2.findContours(edged_image.copy(), cv2.RETR_LIST, cv2.CHAIN_APPROX_SIMPLE)cnts = cnts[0] if ...

  2. 渗透测试----access偏移注入

    偏移注入指access偏移注入,由于数据库结构的问题,偏移注入只适用于access数据库.对于access数据库来说,无论是逐字猜解还是联合查询注入,都是需要我们能够猜到用户名和密码的列名(字段),才 ...

  3. 第1次作业：使用Packet Tracer分析HTTP数据包

    个人信息:      •  姓名:李微微       •  班级:计算1811       •  学号:201821121001 一.摘要 本文将会描述使用Packet Tracer工具用到的网络结构 ...

  4. 12 (OC)* AFNetworking

    AFNetworking主要是对NSURLSession和NSURLConnection(iOS9.0废弃)的封装,其中主要有以下类:1). AFHTTPRequestOperationManager ...

  5. Bat批处理命令执行中文路径解决方法

    用window自带的记事本新建一个bat,然后把命令复制进去,保存就OK

  6. Linux遇到的问题-记录

    Linux遇到的问题 2019-04-09以前: Linux&Win双系统下时间显示不正常的问题 一般安装了双系统(Linux+Windows)就很容易出现问题,Windows是直接取硬件时间 ...

  7. （二）spring 高级装配-Condition -条件化的bean

    Condition:满足某个特定条件的情况下创建bean 条件化配置bean: a:@Conditional 指定一个class ,它指明了通过条件对比的类.如果没有指定class则通过Condito ...

  8. Hadoop 之 分布式缓存的原理和方法——DistributedCache

    1.什么时Hadoop的分布式缓存 答:在执行MapReduce时,可能Mapper之间需要共享一些信息,如果信息量不大,可以将其从HDFS中加载到内存中,这就是Hadoop分布式缓存机制. 2.如何 ...

  9. SpringBoot之整合Mybatis（增，改，删）

    一,在上一篇文章SpringBoot之整合Mybatis中,我们使用spring boot整合了Mybatis,并演示了查询操作.接下来我们将完善这个示例,增加增,删,改的功能. 二,改动代码 1.修 ...

  10. elasticsearch的分布式基础概念(1)

    Elasticsearch对复杂分布式机制的透明隐藏特性 Elasticsearch是一套分布式的系统,分布式是为了应对大数据量 隐藏了复杂的分布式机制 分片机制(随随便便就将一些document插入 ...