直播间自动点赞第一章：MouseEvent 实现根据坐标X,Y自动点击浏览器的效果

最终项目

制作一个自动点赞的浏览器插件，可以根据用户指定一个浏览器区域，进行自动化点击，其中可以设置参数：点击频率、指定区域。

本章节效果

指定了一块区域，进行点击，这边是模拟直播间实现自动化点击

在这里插入图片描述

主要代码

simulateClick是实现一次点击：

selector：是传入的querySelector选择器参数
getBoundingClientRect：得到了元素的left,right,top,bottom
document.elementFromPoint：根据上面的位置传入一个随机坐标，生成一个元素element
MouseEvent：生成鼠标事件
对element 进行触发鼠标点击事件

var simulateClick = function (selector) {
  console.log("simulateClick...");
  let handle = document.querySelector(selector).getBoundingClientRect()

  var left = handle.left,
    right = handle.right,
    top = handle.top,
    bottom = handle.bottom;

  var randomX = (left + right) / 2 + Math.random() * 100;
  var randomY = (top + bottom) / 2 + Math.random() * 100;

  var element = document.elementFromPoint(randomX, randomY);

  console.log(randomX, randomY);
  var evt = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: randomX,
    clientY: randomY
  });

  element.dispatchEvent(evt);
}
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

源码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            height: 100vh;
            background-color: blanchedalmond;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 用于展示点击位置而已，其实可以不显示 */
        .point {
            position: absolute;
            display: inline-block;
            top: 20px;
            background-color: rgb(146, 160, 160);
            width: 100px;
            height: 100px;
            opacity: 0;
            border-radius: 100%;
        }

        .point::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            transform: scale(0);
            animation: rippleEffect 1s linear infinite;
        }

        .animate {
            animation: displayNone 1.5s linear normal;
        }

        .player {
            width: 80%;
            height: 80%;
            background-color: rgb(184, 120, 42);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .player span {
            user-select: none;
            font-size: 12vw;
            white-space: nowrap;
            color: #fff;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3),
                5px 5px 70px rgba(255, 255, 255, 0.3);
        }

        /* 动画效果 */
        @keyframes displayNone {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes rippleEffect {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(2);
                opacity: 0;
            }
        }
    style>
head>

<body>
    <div class="point animate">div>
    <div class="player">
        <span>
            直播区间
        span>
    div>

    <script>
        let body = document.querySelector("body");
        let point = document.querySelector(".point");
        const computedStyle = window.getComputedStyle(point);
        const width = computedStyle.width;
        const height = computedStyle.height;

        // 监听点击事件，添加一些样式以及动画，为了展示而已，后期可以不使用
        body.addEventListener("click", (e) => {
            // console.log(e.clientX, e.clientY, point.style);
            point.classList.remove("animate");

            setTimeout(() => {
                point.style.left = (e.clientX - parseInt(width) / 2) + 'px';
                point.style.top = (e.clientY - parseInt(height) / 2) + 'px';
                // 添加 CSS 类以触发动画
                point.classList.add("animate");
            }, 0);
        })

        // 在动画结束后移除 CSS 类
        point.addEventListener("animationend", function () {
            point.classList.remove("animate");
        });

        // 主要的代码
        // 简单的点击
        // 输入的参数，是需要点击的一个selector 选择器
        var simulateClick = function (selector) {
            let handle = document.querySelector(selector).getBoundingClientRect()

            var left = handle.left,
                right = handle.right,
                top = handle.top,
                bottom = handle.bottom;

            // 弄一个随机位置
            var randomX = (left + right) / 2 + Math.random() * 100;
            var randomY = (top + bottom) / 2 + Math.random() * 100;

            var element = document.elementFromPoint(randomX, randomY);

            var evt = new MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                view: window,
                clientX: randomX,
                clientY: randomY
            });

            element.dispatchEvent(evt);
        }

        setInterval(() => {
            simulateClick('.player');
        }, 200);

    script>
body>

html>
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

相关阅读:
gitlab+jenkins+harbor次完整CI链条
 [贪心算法]忍者道具
 骨传导原理是什么？哪些骨传导耳机值得入手
 过孔设计得越小就越好吗？
预测股票涨跌看什么指标,如何预测明天股票走势
 40多行实现一个非常简单的shell
团队管理｜如何提高技术 Leader 的思考技巧？
计算几何_三角剖分 POJ3675 望远镜
 面试打底稿⑤ 项目一的第一部分
 远程连接问题1
原文地址：https://blog.csdn.net/cs492934056/article/details/133636447