模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例
- 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
- 表单检测用户输入: 给表单添加键盘事件
- 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
- 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
<!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>// 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
// 表单检测用户输入: 给表单添加键盘事件
// 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
// 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子<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.innerText = this.value;}})// 当我们失去焦点,就隐藏这个con盒子jd_input.addEventListener('blur', function() {con.style.display = 'none'})// 当我们获得焦点,就显示这个con盒子jd_input.addEventListener('focue', function() {con.style.display = 'block'})</script>
</body></html>
模拟京东快递单号查询案例2020/11/24相关推荐
- 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 ...
- 案例:模拟京东快递单号的查询效果
案例:模拟京东快递单号的查询效果 要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容 分析: 输入内容时,上面的大盒子会自动显示出来(这里字号更大) 表单检测用户输入,给表单添加键盘事件 ...
- 模拟快递单号查询案例(放大输入内容)
[一天一个小技巧,网页666] 里面有一个制作小倒三角 '▽' 的css代码,在网页中用处很广,一定要掌握奥. 购物使人Happy!下单之后,大家一定很期盼自己的宝贝何时能到吧?别着急,平台贴心地给出 ...
- JavaScript网页制作--京东快递单号查询
JavaScript网页制作–京东快递单号查询 上篇讲到了京东网页的一个可能不被大多数人熟知的小功能,S键自动获得焦点,相比于那个功能,这个快递单号查询的功能可能更明了一点,虽然我也觉得很鸡肋.在网页 ...
- 模拟京东快递单号的查询效果
1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> ...
- 模拟jd快递单号查询
案例分析: 1,快递单号输入内容时,上面的大号字体盒子显示输入框里面的文字 2,同时把快递单号里面的值(value)获取过来赋值给con盒子(innerHTML)作为内容 3,如果快递单号里面内容为空 ...
- css实现小气泡样式和模拟京东快递单号放大效果
css实现小气泡样式:border-color: #fff transparent transparent; transparent表示透明,第一个代表上三角,第二个代表左右三角,第三个代表下三角 & ...
最新文章
- CentOS7.2中NFS1.3 安装
- 憋个大招!4年小Java的心路历程
- java.util.UnknownFormatConversionException: Conversion = ''';
- Spring框架的设计理念与设计模式分析
- Ajax(三)——XMLHttpRequst定义连接发送及其他操作
- 米斯特白帽培训讲义 漏洞篇 逻辑漏洞
- asp 禁止某一个目录_asp.net core 系列 10 配置configuration (上)
- storm中的RotatingCache技术
- 已经被废弃的 tcp_tw_recycle
- drcom宽带认证登录超时_drcom宽带认证客户端登录超时
- 如何下载矢量电子地图
- 计算机限制无线网络,无线网络连接受限制怎么办 无线网络连接受限解决方法【图文】...
- 为什么华为a1路由器网速变慢_华为路由器上网速度慢怎么办?
- 李居明 饿火命(3)
- html5 div 颜色代码,div 字体颜色
- 浙江大学计算机科学排名,2017浙江大学专业排名结果
- 算法日志:python把终端的信息存为log和logging
- Android_自定义倒计时View
- 用telnet+openocd+jtag_dpi+vcs仿真调试RISCV的cpu
- 计算机视觉工程师装机软件一览