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


    学习了部分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>

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

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

  • 相关阅读:
    论有一个服务器后可以干什么
    golang的安装后的文件目录解析
    使用go自带的http包搭建一个的web服务器
    python字符串问题—文件排版
    Python 整数的N进制字符串表示,循环和函数_亲密数,DNA匹配A
    mongodb 基本CRUD
    pip;python包管理工具
    STM32中assert_param的使用
    stm32.cube(一)——系统架构及目录结构
    HTTP、TCP、UDP,Socket,HTTPS
  • 原文地址:https://www.cnblogs.com/wykid/p/8325022.html
Copyright © 2020-2023  润新知