案例：模拟京东快递查询

目录

案例说明：

案例分析：

代码分析：

代码实现：（完整版）

重要！写代码前一定要进行案例分析

案例说明：

快递单号输入内容时，上面的大号字体盒子（con）显示(这里面的字号更大）

快递无内容输入时，con盒子消失

案例分析：

1.表单检测用户输入：给表单添加键盘事件

2.同时把快递单号（input）里面的值（value）获取过来赋值给 con盒子（通过innerHTML）做为内容

3.如果快递单号内容为空，则隐藏大号字体盒子(con)

代码分析：

1.首先需要设置一个大的div盒子，内含表单输入框和“放大镜盒子”，并给它们设置一些样式；此部分代码实现如下：
 <div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class="jd"></div>
placeholder="我是占位符

2.接下来进行js部分

（1）获取元素放大镜【.con】和输入框【jd_input】

（2）注册事件

当按下键盘时，如果输入框中内容为空，放大镜con的display为none；

如果有内容，放大镜的display为block，其文本内容innerHTML为你输入的内容
 jd_input.addEventListener('keyup', function () {if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerHTML = this.value;}
（3）当我们输入框失去焦点时，con隐藏；当我们输入框获得焦点且有内容时，con显示

（熟练if语句的运用）
// 当我们失去焦点，就隐藏这个con盒子jd_input.addEventListener('blur', function () {con.style.display = 'none';})
 // 当我们获得焦点，就要进行一步判断 判断input里面有没有值； 如果input不为空，就显示这个con盒子jd_input.addEventListener('focus', function () {if (this.value !== '') { //如果这个输入内容不为空con.style.display = 'block';}})

代码实现：（完整版）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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>var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup', function () {if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerHTML = this.value;}})jd_input.addEventListener('blur', function () {con.style.display = 'none';})jd_input.addEventListener('focus', function () {if (this.value !== '') { con.style.display = 'block';}})</script>
</body></html>

案例：模拟京东快递查询相关推荐

案例:模拟京东快递单号的查询效果
案例:模拟京东快递单号的查询效果要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容分析: 输入内容时,上面的大盒子会自动显示出来(这里字号更大) 表单检测用户输入,给表单添加键盘事件 ...
JS模拟京东搜索框案例模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入: 给表单添加键盘事件同时把快递单号里面的值(value)获取过来赋值给 con ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
Web APIs：事件高级--键盘事件，京东按键输入及模拟京东快递单查询案例
常用的键盘事件 keydown和keypress的区别是keypress不识别功能键例如ctrl,shift 执行顺序keydown>keypress>keyup keyCode判断用户 ...
本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使.模拟京东按键输入内容.模拟京东快递单号查询 1 跟随鼠标的天使 2 模拟京东按键输入内容 3 模拟京东快递单号查询 1 跟随鼠标的天使 <!DOCTYPE html&g ...
制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
黑马前端案例——模拟京东显示密码
模拟京东显示密码点击输入密码框后的眼睛改变输入框的类型实现效果以下是我的代码点击输入密码框后的眼睛改变输入框的类型这是pink老师的视频中的一个案例,自己先做一遍再看老师的步骤,因为老师的视 ...
模拟京东快递单号的查询效果
1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> ...

案例：模拟京东快递查询

案例说明：

案例分析：

代码分析：

代码实现：（完整版）

案例：模拟京东快递查询相关推荐

最新文章

热门文章

案例：模拟京东快递查询

案例说明：

案例分析 ：

代码分析：

代码实现：（完整版）

案例：模拟京东快递查询相关推荐

最新文章

热门文章

案例分析：