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 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 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
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
师说教学反思
2014/02/07 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
2015年入党决心书
2015/02/05 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
python实现层次聚类的方法
2021/11/01 Python