【学习笔记47】开关变量和拖拽效果

一、开关案例

    <button>点击获取验证码button>
1

（一）基本功能的实现

        // 获取标签对象
        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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（二）代码优化

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)
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

二、拖拽效果

（一）案例效果

• 随着鼠标的移动，div盒子跟着鼠标移动

（二）案例分析

问题1: 事件类型是什么?

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

问题2: 事件源是什么?

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

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

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

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

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

（三）HTML和CSS代码

    

1

    
1
2
3
4
5
6
7
8
9
10
11
12

（四）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);
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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);
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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