一、开关案例
<button>点击获取验证码</button>
（一）基本功能的实现
// 获取标签对象
const oBtn = document.querySelector('button');
// 给按钮添加点击事件
oBtn.addEventListener('click', function () {
// 定义变量 用于获取验证码
let count = 5;
oBtn.innerText = `${count}S获取验证码`;
// 定时器
var timer = setInterval(function () {
count--;
oBtn.innerText = `${count}S获取验证码`;
// 清除定时器
if (count === 0) {
oBtn.innerText = `获取验证码`;
clearInterval(timer)
}
}, 1000)
})
（二）代码优化
- 我们在连续点击时会出现bug，这时需要开关变量来优化
- 第一次处 flag = false 用于在倒计时，连续点击不触发
- 第二次处 flag = true 用于倒计时结束，二次调用函数
// 获取标签对象
const oBtn = document.querySelector('button');
// 定义开关变量
let flag = true;
// 给按钮添加点击事件
oBtn.addEventListener('click', function () {
// 添加开关判断 为false时禁止执行函数
// if(false === false) return;
if(!flag) return;
// 定义变量 用于获取验证码
let count = 5;
oBtn.innerText = `${count}S获取验证码`;
// 关闭开关 在定时之前让其不能重复执行代码
flag = false;
// 定时器
var timer = setInterval(function () {
count--;
oBtn.innerText = `${count}S获取验证码`;
// 清除定时器
if (count === 0) {
// 当时间到达结束时间 重新打开开关 让函数可以二次调用
flag = true;
oBtn.innerText = `获取验证码`;
clearInterval(timer)
}
}, 1000)
})
二、拖拽效果
（一）案例效果
- 随着鼠标的移动，div盒子跟着鼠标移动
（二）案例分析
问题1: 事件类型是什么?
- 鼠标
按下- 鼠标
移动- 鼠标
抬起
问题2: 事件源是什么?
div当前页面div
问题3: 移动距离是多少?
不是单纯的鼠标移动到某一个坐标点, 就代表移动多少解决方法:
- 在鼠标按下时，记录当前点击的坐标
- 在鼠标移动时，重新获取最新的坐标
最新的坐标 - 最初的坐标 === 移动距离
问题4: 是直接将移动距离赋值给元素吗?
- 在鼠标按下时, 记录元素本身的偏移量
- 将本身的偏移量与移动距离相加
- 把上一步得到的值, 赋值给元素
（三）HTML和CSS代码
<div></div>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: cadetblue;
position: absolute;
}
</style>
（四）JS代码
1、没有定义开关变量时
// 1. 获取标签对象
const oDiv = document.querySelector('div');
// 2. 定义变量 存储数据
// 3. 鼠标按下 div
oDiv.addEventListener('mousedown', function(){
console.log(1111);
})
// 4. 鼠标移动 页面
document.addEventListener('mousemove', function(){
console.log(2222);
})
// 5. 鼠标抬起 div
oDiv.addEventListener('mouseup', function(){
console.log(3333);
})
2、定义开关时
// 1. 获取标签对象
const oDiv = document.querySelector('div');
// 2. 定义变量 存储数据
let flag = false; //定义开关变量 用于控制鼠标移动事件是否执行
// 3. 鼠标按下 div
oDiv.addEventListener('mousedown', function(){
flag = true;
console.log(1111);
})
// 4. 鼠标移动 页面
document.addEventListener('mousemove', function(){
if(!flag) return;
console.log(2222);
})
// 5. 鼠标抬起 div
oDiv.addEventListener('mouseup', function(){
flag = false;
console.log(3333);
})
3、移动功能的实现
// 获取标签对象
const oDiv = document.querySelector('div');
// 定义变量 存储数据
let flag = false; // 定义开关变量 用于判断鼠标移动事件
let startX = 0; // 定义变量 用于记录鼠标按下时 X轴的位置
let startY = 0; // 定义变量 用于记录鼠标按下时 Y轴的位置
let eleTop = 0; // 定义变量 用于记录鼠标按下时 元素本身距离顶部的偏移量
let eleLeft = 0; // 定义变量 用于记录鼠标按下时 元素本身距离左侧的偏移量
// 鼠标按下 div
oDiv.addEventListener('mousedown', function(e){
// 鼠标移动事件正常执行
flag = true;
// 鼠标按下时 记录鼠标按下时的坐标
startX = e.clientX;
startY = e.clientY;
// 鼠标按下时 记录元素偏移量
eleTop = oDiv.offsetTop;
eleLeft = oDiv.offsetLeft;
})
// 鼠标移动 页面
document.addEventListener('mousemove', function(e){
// 根据开关变量 判读是否执行鼠标移动事件
if(!flag) return;
// 鼠标移动时 记录最新的坐标
let newX = e.clientX;
let newY = e.clientY;
// 计算移动的距离： 最新的坐标 - 最初的坐标 === 移动的距离
let moveX = newX - startX;
let moveY = newY - startY;
// div本身的偏移量与移动距离相加
let x = eleLeft + moveX;
let y = eleTop + moveY;
// 将移动的距离赋值给元素
oDiv.style.top = y + 'px';
oDiv.style.left = x + 'px';
})
// 鼠标抬起 div
oDiv.addEventListener('mouseup', function(){
flag = false;
})
/**
* 初始值给什么无所谓
* 1. 我们就在按下事件中给一个取反的值
* 2. 在抬起事件中 给一个和初始值相同的值
* 3. 在移动事件中 判断等于初始值的话 就让他不执行 等于抬起事件给的值 让他执行
*/
