百度搜索之历史搜索记录~

学习了部分js后，学习着自己用js做了搜索框的历史记录

本次所练习的重点内容是事件中的“聚焦，失焦”，以及在记录中如何获取搜索框内的内容，以及如何将记录控制在有限数量内的持续更新

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>百度搜索</title>
        <style type="text/css">
        *{padding: 0;margin: 0;}
        div{margin: 150px auto;width: 700px;}
        img{width: 500px;height: 170px;margin: 0 10%;}
        .int_1{width: 600px;height: 50px;float: left;}
        .int_2{width: 95px;height: 54px;float: left;background: #3385FF;color: white;border: none;}
        ul{margin-left: 0;display: none;float: left;border: 1px solid #3385FF;}
        ul li{/*background: red;*/ list-style: none;width: 600px;height: 40px;/*border-bottom: 1px solid #3385FF;*/}
        </style>
    </head>
    <body>
        <div>
            <img src='img/161530m3sby6sayistscs3.png'/>
            <input type="text" class="int_1" value="" />
        <input type="button" value="百度一下" class="int_2" />
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        </div>
        
        <script>
            var ints=document.querySelector(".int_2");
            var lis=document.querySelectorAll("li");
            ints.onclick=function(){
                for(var i=lis.length-1;i>=0;i--){
                    if(document.getElementsByClassName("int_1")[0].value!=""){
                        if(i==0){
                                lis[0].innerHTML=document.getElementsByClassName("int_1")[0].value;
                            }else{
                                lis[i].innerHTML=lis[i-1].innerHTML;
                            }    
                    }
                }
            }
            var intt=document.getElementsByClassName("int_1")[0];
            intt.onfocus=ints.onfocus=function(){                                //聚焦
                var jj= document.getElementsByTagName("ul")[0];
                jj.style.display="block";
            }
            intt.onblur=ints.onblur=function(){                                    //失焦
                var sj= document.getElementsByTagName("ul")[0];
                sj.style.display="none";
            }
    
        </script>
    </body>
</html>

还在持续学习中，希望之后能将此内容可以扩展到更加完善~

欢迎大牛，新人一起学习讨论，赐教~

posted @ 2018-01-21 18:33  WY_KID  阅读(1022)  评论(0)  编辑  收藏  举报