JS模拟实现京东快递单号查询


Posted in Javascript onNovember 30, 2020

本文实例为大家分享了JS实现京东快递单号查询的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  
  .search {
   position: relative;
   width: 178px;
   margin: 100px;
  }
  
  .con {
   display: none;
   position: absolute;
   top: -40px;
   width: 171px;
   border: 1px solid rgba(0, 0, 0, .2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
   padding: 5px 0;
   font-size: 18px;
   line-height: 20px;
   color: #333;
  }
  
  .con::before {
   content: '';
   width: 0;
   height: 0;
   position: absolute;
   top: 28px;
   left: 18px;
   border: 8px solid #000;
   border-style: solid dashed dashed;
   border-color: #fff transparent transparent;
  }
 </style>
</head>

<body>
 <div class="search">
  <div class="con">123</div>
  <input type="text" placeholder="请输入您的快递单号" class="jd">
 </div>
 <script>
  // 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
  // 表单检测用户输入: 给表单添加键盘事件
  // 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
  // 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
  var con = document.querySelector('.con');
  var jd_input = document.querySelector('.jd');
  jd_input.addEventListener('keyup', function() {
    // console.log('输入内容啦');
    if (this.value == '') {
     con.style.display = 'none';
    } else {
     con.style.display = 'block';
     con.innerText = this.value;
    }
   })
   // 当我们失去焦点,就隐藏这个con盒子
  jd_input.addEventListener('blur', function() {
    con.style.display = 'none';
   })
   // 当我们获得焦点,就显示这个con盒子
  jd_input.addEventListener('focus', function() {
   if (this.value !== '') {
    con.style.display = 'block';
   }
  })
 </script>
</body>

小编再为大家分享一段JS代码:

<script>
 var inp = document.querySelector('.inp')
 var son = document.querySelector('.son')
 inp.addEventListener('keyup', function () {
  if (this.value === '') {
   son.style.visibility = 'hidden'
  } else {
   son.style.visibility = 'visible'
   son.innerHTML = this.value
  }
 })
 inp.addEventListener('blur', function () {
  son.style.visibility = 'hidden'
 })
 inp.addEventListener('focus', function () {
  if (this.value !== '') {
   son.style.visibility = 'visible'
  }
 })

</script>

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

Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
JavaScript实现京东快递单号查询
Nov 30 #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
You might like
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php实现微信扫码支付
2017/03/26 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
对python 自定义协议的方法详解
2019/02/13 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
办公自动化专业大学生职业规划书
2014/03/06 职场文书
党员服务承诺书
2014/05/28 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
大学生逃课检讨书
2015/05/04 职场文书
建国大业观后感
2015/06/01 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
关于幸福的感言
2015/08/03 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers