携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
1. 模拟京东按键输入案例
无论光标在什么位置，按s键即可将光标定位到搜索框
- 核心思路︰检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
- 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
- 搜索框获得焦点:使用js 里面的focus()方法
<script>
// 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
// 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
// 搜索框获得焦点： 使用 js 里面的 focus() 方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);
//s键的ASCII码是83
if (e.keyCode === 83) {
search.focus();
}
})
</script>
2. 模拟京东快递单号查询
- 快递单号输入内容时，上面的大号字体盒子( con )显示(这里面的字号更大)
- 表单检测用户输入∶给表单添加键盘事件
- 同时把快递单号里面的值 ( value )获取过来赋值给con盒子( innerText )做为内容
- 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
<!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>
3. 发送验证码60s的时间限制
例如：哔哩哔哩网站上每次登录有一个验证码输入，且每次发送时间为60s的限制
- 按钮点击之后，会禁用disabled为true
- 同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
- 里面秒数是有变化的，因此需要用到定时器
- 定义一个变量，在定时器里面，不断递减
- 如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。
<html lang="en">
手机号：<input type="text" placeholder="请输入"> <button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 10;
btn.addEventListener('click', function () {
this.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
time = 10;
btn.innerHTML = '发送';
} else {
btn.innerHTML = "还剩" + time + "s";
time--;
}
}, 1000)
})
</script>
</html>
