一、开关案例

    点击获取验证码

（一）基本功能的实现

        // 获取标签对象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)})

（二）代码优化

1. 我们在连续点击时会出现bug，这时需要开关变量来优化
2. 第一次处 flag = false 用于在倒计时，连续点击不触发
3. 第二次处 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: 事件类型是什么?

1. 鼠标按下
2. 鼠标移动
3. 鼠标抬起

问题2: 事件源是什么?

1. div
2. 当前页面
3. div

问题3: 移动距离是多少?

1. 不是单纯的鼠标移动到某一个坐标点, 就代表移动多少
2. 解决方法:
   • 在鼠标按下时，记录当前点击的坐标
   • 在鼠标移动时，重新获取最新的坐标
   • 最新的坐标 - 最初的坐标 === 移动距离

问题4: 是直接将移动距离赋值给元素吗?

1. 在鼠标按下时, 记录元素本身的偏移量
2. 将本身的偏移量与移动距离相加
3. 把上一步得到的值, 赋值给元素

（三）HTML和CSS代码

（四）JS代码

1、没有定义开关变量时

        // 1. 获取标签对象const oDiv = document.querySelector('div');// 2. 定义变量 存储数据// 3. 鼠标按下   divoDiv.addEventListener('mousedown', function(){console.log(1111);})// 4. 鼠标移动   页面document.addEventListener('mousemove', function(){console.log(2222);})// 5. 鼠标抬起   divoDiv.addEventListener('mouseup', function(){console.log(3333);})

2、定义开关时

        // 1. 获取标签对象const oDiv = document.querySelector('div');// 2. 定义变量 存储数据let flag = false;    //定义开关变量 用于控制鼠标移动事件是否执行// 3. 鼠标按下   divoDiv.addEventListener('mousedown', function(){flag = true;console.log(1111);})// 4. 鼠标移动   页面document.addEventListener('mousemove', function(){if(!flag) return;console.log(2222);})// 5. 鼠标抬起   divoDiv.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;       // 定义变量 用于记录鼠标按下时 元素本身距离左侧的偏移量// 鼠标按下  divoDiv.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';})// 鼠标抬起  divoDiv.addEventListener('mouseup', function(){flag = false;})

    /*** 初始值给什么无所谓*   1. 我们就在按下事件中给一个取反的值*   2. 在抬起事件中 给一个和初始值相同的值*   3. 在移动事件中 判断等于初始值的话 就让他不执行 等于抬起事件给的值 让他执行*/