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同页面多次调用弹出层具体实例代码
Aug 16 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
原生js实现日历效果
Mar 02 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
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 模拟POST提交的2种方法详解
2013/06/17 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php中请求url的五种方法总结
2017/07/13 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js读取配置文件自写
2014/02/11 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python中update的基本使用方法详解
2019/07/17 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
化妆品促销方案
2014/02/24 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
物业品质提升方案
2014/06/08 职场文书
工地宣传标语
2014/06/18 职场文书
网络技术专业求职信
2014/07/13 职场文书
个人租房协议书样本
2014/10/01 职场文书
早恋主题班会
2015/08/14 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书