-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
小职
2021-07-09
来源 ：「我真的爱敲代码」
阅读 1150
评论 0
摘要：本文主要介绍了web前端Javascript开发——JavaScript-事件进阶案例，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。
本文主要介绍了web前端Javascript开发——JavaScript-事件进阶案例，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。
【案例】图片跟随鼠标移动
分析：
鼠标不断的移动，使用鼠标移动事件： mousemove
在页面中移动，给document注册事件
图片要移动距离，而且不占位置，使用绝对定位即可
核心原理： 每次鼠标移动，都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
pic.style.top = y + 'px'; //想要鼠标放在图片的正中间就加减图片宽度/高度的一半
pic.style.left = x + 'px';
})
【案例】光标定位到搜索框
需求：当按下s键，光标就定位到搜索框
分析：
核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
搜索框获得焦点： 使用 js 里面的 focus() 方法
var text = document.querySelector('input')
document.addEventListener('keyup',function(e) {
if (e.keyCode === 83) { //s键的ASCII码是83
text.focus()
}
})
【案例】输入内容放大镜
需求：当文本框中输入内容时，文本框上面自动显示大字号的内容。
分析：
快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的文字
同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
注意：keydown和keypress在文本框中的特点：他们两个事件触发的时候，文字还没有落入文本框中
keyup事件触发的时候，文字就已经落入文本框里面
失去焦点时，就隐藏这个con盒子了
获得焦点时，并且文本框内容不为空，就显示这个con盒子
<body>
<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>
<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 = ''
} else {
con.style.display = 'block'
con.innerHTML = this.value
}
})
// 失去焦点，隐藏盒子
jd_input.addEventListener('blur', function () {
con.style.display = 'none'
})
// 获得焦点，显示盒子
jd_input.addEventListener('focus', function () {
if (this.value !== '') {
con.style.display = 'block'
}
})
</script>
</body>
————————————————
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
