JavaScript网页制作--京东快递单号查询

╰半夏微凉° 2022-12-24 13:54 179阅读 0赞

# JavaScript网页制作–京东快递单号查询 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

上篇讲到了京东网页的一个可能不被大多数人熟知的小功能，S键自动获得焦点，相比于那个功能，这个快递单号查询的功能可能更明了一点，虽然我也觉得很鸡肋。在网页搜索京东快递单号查询后，会出现这样的一个功能，当你在快递单号栏输入快递单号的时候，上方会出现一个较大的文本框，用较大的字体显示出你输入的快递单号。（虽然我觉得字号也没有差很多）

功能实现：

1.  在输入快递单号的时候，上方出现一个盒子，这个盒子的字号更大。
2.  表单检测用户输入，添加键盘事件。
3.  将输入框快递单号的值获取给上方的盒子的innerText。
4.  快递单号里面的value值为空时隐藏上方的盒子。

![在这里插入图片描述][2020112818074711.png_pic_center]

在没有输入的情况下，只显示input框

![在这里插入图片描述][20201128180855177.png_pic_center]

在输入快递单号的时候，input框上方出现一个盒子，同步输入的快递单号。

程序实现：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>京东快递单号查询</title>
        <style>
            div {
         
                width: 170px;
                height: 30px;
                border: 1px solid black;
                font-size: 20px;
            }
    
        </style>
    </head>
    <body>
        <div style="display: none;"></div>
        <input type="text">
        <button >查询</button>
        <script>
            var input = document.querySelector('input');
            var div = document.querySelector('div');
    		//当input框获得焦点时
            input.addEventListener('focus',function(){
         
                //如果input框中的内容不为空
                if(input.value != ''){
         
                    //显示div盒子
                    div.style.display = 'block';
                }
                
                input.addEventListener('keyup',function(){
         
                    //如果div内容为空 隐藏div
                    if(input.value ===''){
         
                    div.style.display = 'none';
                    }else{
         
                        //div内容不为空  显示div
                    div.style.display = 'block';
                        //将input中的值赋给div
                    div.innerText = input.value;
                    }
                })
           })
           //当input框失去焦点时隐藏div
    		input.addEventListener('blur',function(){
         
                div.style.display = 'none';
            })
        </script>
    </body>
    </html>

在程序监听事件中不使用keydown / keypress的原因：

keydown / keypress在按下键盘时触发，此时input框中没有内容，按下后有了内容，但是并没有再次触发，而此时div盒子并不会弹出来，在下一次键盘按下时会弹出div盒子，盒子中会显示第一次输入的数字。因此在使用keydown / keypress时会出现数据不同步的现象。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/668a0d4b968b45d88b43c41419e00592.png
[2020112818074711.png_pic_center]: https://img-blog.csdnimg.cn/2020112818074711.png#pic_center
[20201128180855177.png_pic_center]: https://img-blog.csdnimg.cn/20201128180855177.png#pic_center