本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
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="images/angel.gif" alt="">
<script>
/* 案例分析:
1.鼠标不断的移动,使用鼠标移动事件: mousemove
2.在页面中移动,给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>
得到焦点但没有输入内容时:
得到焦点且输入内容后:
失去焦点时: