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. 基于redis(订阅发布)实现python和java进程间通信

    主要结构为: python进程发布消息,java进程订阅消息. 依赖环境: python:   pip install redis java:  jedis 1. python端: PubSub.py ...

  2. Spring 7大模块的解说

    先看以下Spring的组成图: 7大模块包括:core.AOP.ORM.DAO.WEB.Context.WebMvc. 1:core:spring的容器,主要组成是BeanFactury.也是Spri ...

  3. ReactNative之Redux详解

    用redux有一段时间了,感觉还是有必要把其相关的知识点系统的总结一下的,毕竟好记性不如烂笔头.上篇博客更新了关于<ES6中的迭代器.Generator函数以及Generator函数的异步操作& ...

  4. js vue 页面添加水印

    vue 微信页面添加水印 this.$nextTick(function() {                                   watermark({ watermark_txt ...

  5. ASP.NET Core 3.0 使用gRPC

    一.简介 gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架. gRPC使客户端和服务端应用程序可以透明地进行通信,并简化了连接系统的构建.它使用HTTP/2作为通信协 ...

  6. Windows导出文件夹中的文件名列表

    在需要导出的目录中,shift+右键,打开cmd或者powershell 运行命令:dir -name >list.txt 刷新文件夹,打开list.txt

  7. SVN更改地址

    因为服务器更改或其他某些原因导致svn地址改变,那么本地应该如何操作tortoiseSVN?如何成功的把项目进行迁移? 操作步骤 1.右击项目目录---TortoiseSVN----重新定位(英文版是 ...

  8. Janus安装教程，ubuntu18.04系统

    Janus安装教程,ubuntu18.04系统     本文介绍Jansu如何安装,操作系统为Ubuntu 18.04.    (1)安装git 执行命令:“sudo apt-get install ...

  9. redis-分布式锁-刷新信号量

    为什么需要刷新信号量呢,因为信号量有过期时间: 为什么信号量需要过期时间呢,因为需要利用超时特性,解决分布式锁存在的一些固有缺陷. 而对于类似流式API来说,一般10秒的过期时间是远远不够的.因此我们 ...

  10. 阿里云服务器ecs配置之安装redis服务

    一.介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多,包括st ...