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>div{height: 1000px;}</style>
</head><body><div><input type="text"></div><script>// 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面// 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键// 搜索框获得焦点： 使用 js 里面的 focus() 方法var search = document.querySelector('input');document.addEventListener('keyup', function(e) {console.log(e.keyCode);if (e.keyCode === 83) {search.focus();}})</script>
</body></html>

模拟京东快递单号查询

<!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模拟京东搜索框案例模拟京东快递单号查询案例相关推荐

模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入: 给表单添加键盘事件同时把快递单号里面的值(value)获取过来赋值给 con ...
模拟快递单号查询案例（放大输入内容）
[一天一个小技巧,网页666] 里面有一个制作小倒三角 '▽' 的css代码,在网页中用处很广,一定要掌握奥. 购物使人Happy!下单之后,大家一定很期盼自己的宝贝何时能到吧?别着急,平台贴心地给出 ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使.模拟京东按键输入内容.模拟京东快递单号查询 1 跟随鼠标的天使 2 模拟京东按键输入内容 3 模拟京东快递单号查询 1 跟随鼠标的天使 <!DOCTYPE html&g ...
JavaScript网页制作--京东快递单号查询
JavaScript网页制作–京东快递单号查询上篇讲到了京东网页的一个可能不被大多数人熟知的小功能,S键自动获得焦点,相比于那个功能,这个快递单号查询的功能可能更明了一点,虽然我也觉得很鸡肋.在网页 ...
简单模拟快递单号查询页面展示
案例分析: ①快递单号输入内容时,上面的大号字体盒子(con)显示(这里面的文字 ②同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容 ③如果快递单号里面内容为 ...
快递接口API：用JS调用快递鸟API接口进行快递单号查询
本文实例为大家分享了JS调用快递鸟API接口,来实现600多家的物流轨迹查询,完成快递单号查询的具体代码,供大家参考,具体内容如下只需要一步,新建一个Text文本,把下面这段代码复制进去,替换你自己 ...
js模拟快递单号查询
案例分析 1.快递单号输入内容时,上面的大号字体盒子显示这里面的数字 2.同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容 3.如果快递单号里面内容为空,则隐 ...
模拟jd快递单号查询
案例分析: 1,快递单号输入内容时,上面的大号字体盒子显示输入框里面的文字 2,同时把快递单号里面的值(value)获取过来赋值给con盒子(innerHTML)作为内容 3,如果快递单号里面内容为空 ...

JS模拟京东搜索框案例模拟京东快递单号查询案例

模拟京东搜索框案例

模拟京东快递单号查询

JS模拟京东搜索框案例模拟京东快递单号查询案例相关推荐

最新文章

热门文章

JS模拟京东搜索框案例 模拟京东快递单号查询案例

模拟京东搜索框案例

模拟京东快递单号查询

JS模拟京东搜索框案例 模拟京东快递单号查询案例相关推荐

最新文章

热门文章

JS模拟京东搜索框案例模拟京东快递单号查询案例

JS模拟京东搜索框案例模拟京东快递单号查询案例相关推荐