JavaScript实现百度搜索页面

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.οnclick=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.οnkeyup=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.οnfοcus=function(){    var ul=document.getElementById("ul");    ul.setAttribute("style","display:block;");}//input失去焦点事件ipt.οnblur=function(){    var ul=document.getElementById("ul");    ul.setAttribute("style","display:none;");}//鼠标li所选中的下拉值再赋值给inputfor(var x of arr){    x.οnmοusedοwn=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"; }}