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 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jquery中键盘事件小结
Feb 24 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
基于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中过滤非法字符的具体实现
2013/10/29 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
从vue源码看props的用法
2019/01/09 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
static关键字的用法
2013/10/07 面试题
大学在校生求职信范文
2013/11/21 职场文书
生日宴会答谢词
2014/01/09 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python