js练习:模拟京东快递单号查询
1.实现效果:
当文本框中输入文字时,上面有一个放大文字的框中显示文本框内容。失去焦点时,放大文字的框消失,获得焦点时,放大文字的框显示。
2.案例分析
3.代码实现
<!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>模拟京东快递单号查询</title><style>* {padding: 0;margin: 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 input = document.querySelector('.jd');input.addEventListener('keyup', function() {if(this.value == '') {con.style.display = 'none';} else {con.innerHTML = this.value;con.style.display = 'block';}})// 失去焦点,隐藏盒子。input.addEventListener('blur', function() {if(this.value != '') {con.style.display = 'none';}})// 有焦点时,出现盒子。input.addEventListener('focus', function(){if(this.value != '') {con.style.display = 'block';}})</script>
</body>
</html>
js练习:模拟京东快递单号查询相关推荐
- JS模拟京东搜索框案例 模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- 773-780---DOM事件高级(常用鼠标事件,案例:跟随鼠标的天使,常用的键盘事件,案例:模拟京东按键输入内容,案例:模拟京东快递单号查询)
文章目录 事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象 案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表 案例 ...
- 本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使.模拟京东按键输入内容.模拟京东快递单号查询 1 跟随鼠标的天使 2 模拟京东按键输入内容 3 模拟京东快递单号查询 1 跟随鼠标的天使 <!DOCTYPE html&g ...
- 模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入: 给表单添加键盘事件 同时把快递单号里面的值(value)获取过来赋值给 con ...
- 案例:模拟京东快递单号的查询效果
案例:模拟京东快递单号的查询效果 要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容 分析: 输入内容时,上面的大盒子会自动显示出来(这里字号更大) 表单检测用户输入,给表单添加键盘事件 ...
- JavaScript网页制作--京东快递单号查询
JavaScript网页制作–京东快递单号查询 上篇讲到了京东网页的一个可能不被大多数人熟知的小功能,S键自动获得焦点,相比于那个功能,这个快递单号查询的功能可能更明了一点,虽然我也觉得很鸡肋.在网页 ...
- 模拟京东快递单号的查询效果
1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> ...
- 模拟jd快递单号查询
案例分析: 1,快递单号输入内容时,上面的大号字体盒子显示输入框里面的文字 2,同时把快递单号里面的值(value)获取过来赋值给con盒子(innerHTML)作为内容 3,如果快递单号里面内容为空 ...
- css实现小气泡样式和模拟京东快递单号放大效果
css实现小气泡样式:border-color: #fff transparent transparent; transparent表示透明,第一个代表上三角,第二个代表左右三角,第三个代表下三角 & ...
- Web APIs:事件高级--键盘事件,京东按键输入及模拟京东快递单查询案例
常用的键盘事件 keydown和keypress的区别是keypress不识别功能键 例如ctrl,shift 执行顺序keydown>keypress>keyup keyCode判断用户 ...
最新文章
- 又一起“删库”:链家程序员怒删公司 9TB 数据,被判 7 年
- 正负值地处理以及添加回调函数小案例
- 使用Java VisualVM分析您的应用程序
- HTML静态网页---标签
- springboot + vue项目跨域请求解决方案
- HDU_oj_2046 骨牌铺方格
- python configure函数 循环_使用python统计git仓库中频繁修改的热点函数
- 手机尺寸相关的概念 +尺寸单位+关于颜色
- 【二分法】计蒜客:求方程的近似解
- 怎样才是真正的架构师
- yolo迭代次数_你一定从未看过如此通俗易懂的YOLO系列(从v1到v5)模型解读 (中)
- SQL server 2016数据库 下载安装
- laravel 框架使用hdjs 实现富文本编辑器功能
- 《人月神话(The Mythical Man-Month)》1 看清问题的本质:如果我们想解决问题,就必须试图先去理解它...
- linux 拷贝xlsx_linux 命令行将xlsx格式文件转换成CSV的5种方法
- 消息队列(MQ)之生产者-消费者 | 一文搞定
- 概率论与数理统计 4 Continuous Random Variables and Probability Distributions(连续随机变量与概率分布)(上篇)
- MBTI职业性格测试(Psytopic特别版)
- SRE学堂:OSS监控告警案例分析
- pycharm python 依赖管理_怎么解决pycharm license Acti的方法_python
热门文章
- 获取计算机用户名 方法
- 贪心——国际象棋锦标赛
- linux扩充home目录,扩大/home目录的空间(转)
- Warbler, A Little Birdie To Introduce Your Rails App To Java
- 思翼FM30高频头蓝牙数传连接地面站远距离通信功能
- 【​观察】加速“云矩阵”生态落地,京东云能否成为新变量?
- Java实现支付功能(支付宝)
- C# - 获取工程里资源(图片、图标等)
- 高通骁龙410e/APQ8016E嵌入式物联网应用处理器解决方案
- 【fgm.cc练习4-1】setTimeout应用:重点不是setTimeout,而是各种布局令我头大