JS模拟实现京东快递单号查询
作者：CV工程师呀 时间：2024-04-18 09:45:44
本文实例为大家分享了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>
来源：https://blog.csdn.net/qq_44954571/article/details/107288975
标签：js,快递单号,查询
0
投稿猜你喜欢
Window 64位下python3.6.2环境搭建图文教程
2023-07-26 02:22:45
Java解析Excel文件并把数据存入数据库
2024-01-22 10:42:26
浅谈Mysql、SqlServer、Oracle三大数据库的区别
2024-01-23 21:30:40
ES6深入理解之“let”能替代”var“吗?
2024-05-28 15:41:33
jsp include文件时的一个乱码解决方法
2024-03-27 19:34:28
实现UTF8转换GB2312国标码的asp代码
2011-02-28 10:53:00
mysql5.7创建用户授权删除用户撤销授权
2024-01-22 17:52:11
使用python实现回文数的四种方法小结
2022-01-17 14:57:51
Python 正则表达式入门（初级篇）
2021-12-03 23:41:12
一个js封装的不错的选项卡效果代码
2024-02-26 11:23:59
机器学习经典算法-logistic回归代码详解
2021-05-06 23:56:12
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011-06-06 10:28:00
python3 使用traceback定位异常实例
2023-05-03 12:42:35
如何设计一个成功的网站
2007-09-07 10:33:00
aspjpeg 添加水印教程及生成缩略图教程
2011-04-04 11:04:00
Python实现简单查找最长子串功能示例
2023-01-14 01:20:33
用Python实现群发邮件
2023-10-30 20:04:36
微信小程序开发常见问题及解决方案
2024-04-18 09:35:04
Python Django切换MySQL数据库实例详解
2024-01-21 02:02:47
python 判断自定义对象类型
2021-08-29 22:09:37