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 设置级联菜单的默认值
Jun 13 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
js操作滚动条事件实例
Jan 29 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php中smarty区域循环的方法
2015/06/11 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Django日志及中间件模块应用案例
2020/09/10 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
播音主持女孩的自我评价分享
2013/11/20 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2015年化验员工作总结
2015/04/10 职场文书
离职信范本
2015/06/23 职场文书
MySQL之DML语言
2021/04/05 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript