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. FaceBook快捷登入

    关于集成FaceBook快捷登入,我上回做了个最简单的版本,所有Web端通用,在这边共享下,有更好的解决方案的,麻烦评论留个地址,有不妥之处请指正. 首先,我们先加载Facebook的Js windo ...

  2. DevExpress的对话框XtraMessageBox的使用

    场景 在Winform中一般弹出对话框使用的是MessageBox,而在 DevExpress中使用的是XtraMessageBox实现对话框. 效果 实现 首先新建确认按钮的调用方法: public ...

  3. Elastic Stack 笔记（七）Elasticsearch5.6 聚合分析

    博客地址:http://www.moonxy.com 一.前言 Elasticsearch 是一个分布式的全文搜索引擎,索引和搜索是 Elasticsarch 的基本功能.同时,Elasticsear ...

  4. Linux MySQL-5.7 root初始密码修改

    操作系统为centos7 64 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2. ...

  5. ORA-08102异常重现及恢复

    现象: 在表上面新建主键报ORA-08102的异常: SQL> alter table t add primary key(id); alter table t add primary key( ...

  6. 【iOS 】把一些不太重要的任务放在空时执行

    -(void)idleNotificationMethod { } -(void)registerForIdleNotification { [[NSNotificationCenter defaul ...

  7. python高级—— 从趟过的坑中聊聊爬虫、反爬以及、反反爬，附送一套高级爬虫试题

    前言: 时隔数月,我终于又更新博客了,然而,在这期间的粉丝数也就跟着我停更博客而涨停了,唉 是的,我改了博客名,不知道为什么要改,就感觉现在这个名字看起来要洋气一点. 那么最近到底咋不更新博客了呢?说 ...

  8. 阿里云服务器CentOS6.9防火墙启动无效--iptables消失

    iptables 是与最新的 3.5 版本 Linux 内核集成的 IP 信息包过滤系统.如果 Linux 系统连接到因特网或 LAN.服务器或连接 LAN 和因特网的代理服务器, 则该系统有利于在 ...

  9. 主流视觉SLAM、激光SLAM总结

    SLAM预备知识 SLAM for Dummies 全文总结 视觉里程计 卡尔曼滤波推导 MonoSLAM MonoSLAM:Real-Time Single Camera SLAM全文总结 PTAM ...

  10. pywintypes.com_error: (-2147352567, '发生意外 解决方案

    在使用win32com处理Excel的时候,遇到pywintypes.com_error: (-2147352567 错误. 百度.Google各种方法不得其解,和以下网页类似——http://blo ...