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. VS中一些提高编码效率的快捷键

    场景 新手入门,看见大神们在VS中只用键盘就可以完成一系列操作. 整理一些常用的能提高效率的快捷键. 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 大量编程视频教程:https:// ...

  2. 基于DevExpress的SpreadsheetControl实现对Excel的打开、预览、保存、另存为、打印(附源码下载)

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  3. 7、创建图及图的遍历（java实现）

    1.顺序表用于图的深度优先遍历 public class SeqList { public final int MaxSize = 10; public Object list[]; public i ...

  4. AD 域服务简介（三）- Java 对 AD 域用户的增删改查操作

    博客地址:http://www.moonxy.com 关于AD 域服务器搭建及其使用,请参阅:AD 域服务简介(一) - 基于 LDAP 的 AD 域服务器搭建及其使用 Java 获取 AD 域用户, ...

  5. Docker详解（三）

    目录 1. Docker镜像 1.1 镜像存储 1.2 base镜像 1.3 镜像Commit 2. Docker容器数据卷 2.1 基本介绍 2.2 数据卷 2.3 数据卷容器 序言:前两章我们主要 ...

  6. ActiveMQ基本使用

    消息队列,目前在实际的开发项目中应用十分广泛.本文主要介绍入门级的ActiveMQ的基本使用以及相关的概念. 一.JMS 全称 Java Message Service,即Java消息服务.JMS是一 ...

  7. Mac搭建pyhton+selenium+pycharm实现web自动化测试

    安装pip或者安装pip3: sudo easy_install pip 二选一安装 sudo easy_install python3-pip 安装selenium: sudo pip3 insta ...

  8. 从原理到场景 系统讲解 PHP 缓存技术(全)

    概述 缓存已经成了项目中是必不可少的一部分,它是提高性能最好的方式,例如减少网络I/O.减少磁盘I/O 等,使项目加载速度变的更快. 缓存可以是CPU缓存.内存缓存.硬盘缓存,不同的缓存查询速度也不一 ...

  9. redis-分片（转）

    转:https://www.cnblogs.com/houziwty/p/5167075.html 分片(partitioning)就是将你的数据拆分到多个 Redis 实例的过程,这样每个实例将只包 ...

  10. Vue2.0+ElementUI实现表格翻页的实例

    参考地址: https://www.cnblogs.com/zhouyifeng/p/7706815.html