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. .Net基础篇_学习笔记_第三天_运算符

    入门编程思想,由传统“算法”引申到“编程”思想 using System; using System.Collections.Generic; using System.Linq; using Sys ...

  2. 【学习笔记】第一章 python安全开发简介

    1.1为什么黑客喜欢用python? python为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数据库.文本等大量内容,被形象的称为“”内置电池“”,用python开发,许多功能不必从零 ...

  3. All Of ACM

    数据结构和算法专栏,我会什么写什么  = = 不定时更新 一.数据结构 树状数组详解 线段树详解 二.算法 KMP算法 三.板子 我的代码模板 大整数模板 四.题解报告 几道STL题目(FJUT - ...

  4. STM32的RTC中断标志只能手动清除

    背景: 最近在做一个stm32的项目,其中用到RTC的实时时钟功能.时钟源采用外部32.768K晶振,时钟预分频设置为32767,目的是为了产生1秒的中断,然后在中断处理函数中更新实时年月日时分秒. ...

  5. Leetcode 121.买股票的最佳时机

    题目描述: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出 ...

  6. pyenv的安装和简单使用

    centos7.4   python2.7 安装pyenv需要的依赖 yum -y install gcc zlib-devel bzip2-devel openssl-devel ncurses-d ...

  7. spring定时任务-文件上传进度条

    spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...

  8. rpm -qa|grep nfs >/dev/null 2>&1作用

    在使用一些shell命令是,经常会用到rpm -qa|grep nfs >/dev/null 2>&1之类的命令,该命令干嘛用的呢? 其实这个命令就是将rpm -qa|grep n ...

  9. Idea 配置Jrebel热部署

    虽说Idea自带热更新功能,但是一旦mapper更改,则不能及时更新,影响开发效率. 接下来,我们来配置Jrebel热更新,简单方便实用. 第一步:进入插件下载页面. 第二步:安装jrebel插件. ...

  10. 阿里云ECS服务器提示需要修复的漏洞问题

    1.漏洞: RHSA-2018:1842: kernel security, bug fix, and enhancement updateRHSA-2018:2299: NetworkManager ...