JavaScript实现百度搜索页面

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">&#xe652;</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{
    100%;
    overflow:hidden;
}
/*鼠标跟随*/
#to_top{
        position:absolute;
        cursor:pointer;
         35px;
        height: 30px;
        background-image: url(../img/猫.png);
        background-size:100% 100%;
}
/*背景*/
.bj{
    100%;
    height:768px;
    /*background-color:red;*/
    background-image: url(../img/1F613111001-4.jpg);
    /*设置背景图片透明度*/
    opacity:0.8;
    background-size:100% 100%;
    overflow:hidden;
}
/*内容*/
.logo_d{
    260px;
    height:125px;
    /*background-color:red;*/
    margin:0px auto;
    margin-top:40px;
    margin-bottom:10px;
}
.logo{
    height:125px;
}
.bd_k{
    650px;
    height:42px;
    /*background-color:yellow;*/
    margin:0 auto;
}
#input{
    521px;
    height:38px;
    outline:none;
    font-size:16px;
    text-indent:8px;
    float:left;
}
#btn{
    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{
    649px;
    height:120px;
    /*background-color:yellow;*/
    margin:0 auto;
    
}
#ul{
    list-style:none;
    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;
}

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";
 }
}