📒 JavaScript 基础实例

# 1️⃣ 事件 🌰

div 跟随鼠标移动

获取鼠标相对于窗口的坐标 clientX 和 clientY ：

但是要注意网页高度大于网页窗口的高度时，鼠标相对于窗口的坐标与 div 的偏移量会出现偏差，需要加上滚动条的滚动长度。

使用 scrollTop 获取滚动条的滚动长度，需要注意对不同的浏览器的兼容问题：

window.onload = function () {
    // 获取 box1 
    var box = document.getElementById("box1");

    // 绑定鼠标移动时加你
    document.onmousemove = function (event) {
        event = event || window.event; // 解决兼容问题

        // 获取鼠标坐标,数值没有单位
        // 是相对于可见窗口的坐标 
        // 而 div 的偏移量是相对于整个网页
        var left = event.clientX;
        var top = event.clientY;

        // 获取滚动条top和left
        // document.body.~ 适用于 Chrome
        // document.documentElement.~ 适用于火狐和 IE
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

        // 设置 box1 的偏移量
        box1.style.left = left + sl + 'px';
        box1.style.top = top + st + 'px';
    }
}

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

直接获取鼠标相对于整个网页的坐标 pageX 和 pageY 即可：

var left = event.pageX;
var top = event.pageY;

// ... 

 box1.style.left = left + 'px';
box1.style.top = top + 'px';

1
2
3
4
5
6
7

# 2️⃣ JavaScript 定时器 🌰

⏲️ 定时器每秒自动切换

<html>
  <body>
    <img src="" alt="" id="img1">
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>
</html>
<script type="text/javascript">
        window.onload = function () {
            // 1 获取图片标签元素
            var img1 = document.getElementById("img1");

            // 获取开始和停止的按钮
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");


            // 2 创建一个数组来保存图片的路径
            var imgArr = ["https://placekitten.com/80/80", "https://placekitten.com/80/80", "https://placekitten.com/80/80", "https://placekitten.com/80/80"]

            // 定义定时器标识
            var timer;

            // 3 创建一个变量用来保存当前图片的索引
            var index = 0;

            // 4 开启一个定时器，实现自动切换图片
            btn01.onclick = function () {
                /* 每点击一次就会创建一次定时器
                 每一个定时器的标识都不同
                 导致停止按钮只能关闭最后一次开启的定时器  */

                // 每次创建一次定时器把上一次的定时器先关闭了
                clearInterval(timer);

                timer = setInterval(function () {
                    // 使索引自增
                    index++;

                    // 使索引实现循环
                    // 判断索引是否大于最大索引
                    /* if (index >= imgArr.length){
                        index = 0;
                    } */
                    // 或者使用取模法
                    index = index % imgArr.length;

                    // 修改图片元素标签的src属性
                    img1.src = imgArr[index];
                }, 1000)
            }

            btn02.onclick = function () {
                clearInterval(timer);
            }
        }
    </script>

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
54
55
56
57

定时器的关闭与停止、定时器的唯一标识；

编辑

#JavaScript

📢 上次更新: 2022/09/02, 10:18:16

← 🔭 JavaScript 作用域 🚏 Git 版本控制学习路线→