利用JavaScript模拟京东快递单号查询效果
文章图片
1、上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大
Document - 锐客网 table {margin: 20px; border: none}p {font-size: 15px; }input {height: 15px}button {background-color: rgb(77, 132, 233); border: none; }a {text-decoration: none; color: white; font-size: 15px; }div {font-size: 25px; width: 100px; height: auto; border: 1px solid black; display: none; position: absolute; top: 0px}
快递单号
问题:
1、上面放大框的效果怎么做,倒三角虽然可以使用border来完成,但是效果会有颜色的填充
2、当输入框输入的文字较多的时候,怎么自动的改变上面放大框的高度和宽度
文章图片
文章图片
.con::before {content: ''; height: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent}
Document - 锐客网 .search {position: relative; width: 178px; margin: 100px}.con {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; display: none; }.con::before {content: ''; height: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent}
文章图片
如果换成keydown或者keypress来注册事件的话,会少一个字,这是因为文字还没有落入文本框的时候,就以及触发了事件,但此时里面的内容还是空的,因此上面的文本框是不显示的。第二次按下的时候,立刻触发事件,此时字并没有进入盒子,盒子里面留下的只有前一个字。
注意区别
keypress更加不行,因为对于功能键是没有效果的。
4、当失去焦点的时候,就隐藏con。得到焦点就显示(onfocus、onblur)
【利用JavaScript模拟京东快递单号查询效果】以上就是利用JavaScript模拟京东快递单号查询效果的详细内容,更多关于JavaScript快递单号查询的资料请关注脚本之家其它相关文章!
推荐阅读
- JavaScript实现消息框示例
- 在页面加载之后执行JavaScript
- 利用selenium自动化实现搜索框输入内容
- 原生JavaScript灵魂拷问,你能全部答对吗(#yyds干货盘点#)
- JavaScript数据结构之Object
- #yyds干货盘点#JavaScript - 字符串的转义
- 原生JavaScript灵魂拷问,你能答上多少#yyds干货盘点#
- JavaScript错误处理try..catch...finally,涵盖throw,TypeError,RangeError#yyds干货盘点#
- #私藏项目实操分享#Python模拟登录,selenium模块,Python识别图形验证码实现自动登录
- JavaScript之预编译学习(内含多个面试题) #yyds干货盘点#