本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
- 1 跟随鼠标的天使
- 2 模拟京东按键输入内容
- 3 模拟京东快递单号查询
1 跟随鼠标的天使
<!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>img {position: absolute;}</style>
</head>
<body><img src="data:images/angel.gif" alt=""><script>/* 案例分析:1.鼠标不断的移动,使用鼠标移动事件: mousemove2.在页面中移动,给document注册事件3.图片要移动距离,而且不占位置,我们使用绝对定位即可4.核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可以移动图片 */var pic = document.querySelector('img');// mousemove 只要我们鼠标移动1px 就会触发这个事件document.addEventListener('mousemove',function(e) {var x = e.pageX;var y = e.pageY;// 此时鼠标在图片左上角// pic.style.left = x + 'px'; // !!!!千万不要忘记给left和top加字符串px单位 !!!!// pic.style.top = y + 'px';// 要想鼠标在图片正中间// 50 40为图片大小的一半pic.style.left = x - 50 + 'px';pic.style.top = y - 40 + 'px';});</script>
</body>
</html>
2 模拟京东按键输入内容
- 当我们按下s键,光标就定位到搜索键
<!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>
</head>
<body><input type="text"><script>/* 案例分析:1.核心思路:检测用户是否按下了s键,如果按下了s键,就把光标定位到搜索框里面2.使用键盘事件对象里面的keyCode判断用户按下的是否是s键3.搜索框获得焦点:使用js里面的focus()方法 */var search = document.querySelector('input');// 如果使用keydown 不仅会使光标定位到搜索框 还会打印出s// 所以使用keyup 只会将光标定位到搜索框 不会打印document.addEventListener('keyup',function(e) {if (e.key == 's' || e.key == 'S') {search.focus();}});</script>
</body>
</html>
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>* {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); /* box-shadow 属性向框添加一个或多个阴影 */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>/* 案例分析:1.快递单号输入内容时,上面的大号字体盒子(con)显示(这里面的字号更大)2.表单检测用户输入:给表单添加键盘事件3.同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText / innerHTML)作为内容4.如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子5.注意:keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中6.keyup事件触发的时候,文字已经落入文本框里面了7.当我们失去焦点,就隐藏这个con盒子8.当我们获得焦点,并且文本框内容不为空,就显示这个con盒子 */var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup',function(e) {if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})// 当我们失去焦点,就隐藏这个con盒子jd_input.addEventListener('blur',function(e) {con.style.display = 'none';})// 当我们获得焦点,就显示这个con盒子jd_input.addEventListener('focus',function(e) {if(this.value !== '') {con.style.display = 'block';}})</script>
</body>
</html>
得到焦点但没有输入内容时:
得到焦点且输入内容后:
失去焦点时:
本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询相关推荐
- 773-780---DOM事件高级(常用鼠标事件,案例:跟随鼠标的天使,常用的键盘事件,案例:模拟京东按键输入内容,案例:模拟京东快递单号查询)
文章目录 事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象 案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表 案例 ...
- 想让自己的网站变得精致吗?那就进来看看吧:跟随鼠标的天使
跟随鼠标的天使 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
- 模拟linux设备按键工具,linux下如何模拟按键输入和模拟鼠标
linux下如何模拟按键输入和模拟鼠标 发布时间:2008-08-19 21:11:54来源:红联作者:anopup 查看/dev/input/eventX是什么类型的事件, cat /proc/bu ...
- 案例-跟随鼠标的天使【前端实现】
目录 案例说明: 案例分析: 代码实现: 图片引用 案例说明: 天使图片跟随鼠标移动,利用鼠标移动事件mousemove 案例分析: (1)鼠标不断的移动,使用鼠标移动事件: mous ...
- linux模拟手柄输入,linux下如何模拟按键输入和模拟鼠标
查看/dev/input/eventX是什么类型的事件, cat /proc/bus/input/devices 设备有着自己特殊的按键键码,我需要将一些标准的按键,比如0-9,X-Z等模拟成标准按键 ...
- linux下如何模拟按键输入和模拟鼠标?
转贴请注明出处: blog.csdn.net/chenzhixin 查看/dev/input/eventX是什么类型的事件, cat /proc/bus/input/devices 设备有着自己特殊的 ...
- Pink老师JavaScript课程作业 - 输入内容时 上方出现大号提示框(京东快递单号输入框模拟)
效果 核心代码 <script>//获取输入框 和 提示框var con = document.querySelector('.con');var input = document.que ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- 元素跟随鼠标旋转,未待完续。。。。
本节主要讲的是元素跟随鼠标旋转主要是用到了原生js更改css的transform属性,这个属性下有很多方法,下面就只讲关于本节内容的几种方法,其他的可以私下自己去看一看 translate(x,y) ...
最新文章
- Ubuntu下 Oracle sqldeveloper中文目录、文件,select查询结果中:中文乱码
- java lodop打印_Java的云打印Lodop
- java amp amp 怎么用,java中amp;与amp;amp;的区别
- Hibernate与MyBatis对比
- wxml报错原因_C#生成、解析xml文件以及处理报错原因
- 前端学习(1951)vue之电商管理系统电商系统之获取父级数据列表
- php 下拉菜单 多个值,PHP,而foreach下拉菜单在所有下拉菜单中都具有相同的选定值...
- matlab 自带pca函数,matlab实现主成分分析 princomp函数 PCA中有这个函数
- 关于 Injection of autowired dependencies failed 错误的解决方法
- 新手入门:我的Mac文件管理使用心得
- 电脑常见故障排除手册(黑屏、死机、重启、蓝屏)
- java实现kotlin接口_Kotlin 接口与 Java8 新特性接口详解
- mac开机启动项怎么设置,苹果电脑开机启动项在哪里设置
- python游戏计分代码_Python笔试题之设计“跳一跳”小游戏计分器
- 《鹰猎长空》看世界范围内电影票价上涨的原因
- 前端笔记05 - js
- centos7 分辨率修改_centos系统修改屏幕分辨率问题
- 京东实习测开HR面(过)
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一)
- 2019 虎鲸杯电子取证大赛赛后复盘总结