JavaScript实现京东快递单号查询


Posted in Javascript onNovember 30, 2020

JavaScript网页制作?京东快递单号查询,供大家参考,具体内容如下

JavaScript实现京东快递单号查询

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

功能实现:

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

JavaScript实现京东快递单号查询

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

JavaScript实现京东快递单号查询

在输入快递单号的时候,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时会出现数据不同步的现象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript实现密码验证
Nov 10 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 #Javascript
express异步函数异常捕获示例详解
Nov 30 #Javascript
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
JavaScript实现商品评价五星好评
Nov 30 #Javascript
详解React路由传参方法汇总记录
Nov 29 #Javascript
基于jQuery拖拽事件的封装
Nov 29 #jQuery
You might like
PHP面向对象法则
2012/02/23 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
实例详解Python模块decimal
2019/06/26 Python
python 经典数字滤波实例
2019/12/16 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
入团者的自我评价分享
2013/12/02 职场文书
党校培训思想汇报
2014/01/03 职场文书
医院护士的求职信
2014/01/03 职场文书
趣味运动会活动方案
2014/02/12 职场文书
化工工艺设计求职信
2014/06/25 职场文书
校园安全学习心得体会
2016/01/18 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
小程序实现侧滑删除功能
2022/06/25 Javascript