zyckk4.github.io/click_speed_test.html at main · zyckk4/zyckk4.github.io · GitHub

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
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击速度检测工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #clickArea {
            width: 300px;
            height: 150px;
            background-color: #4CAF50;
            color: white;
            line-height: 150px;
            font-size: 24px;
            cursor: pointer;
            user-select: none;
            margin-bottom: 20px;
        }

        #restartButton {
            width: 150px;
            height: 40px;
            background-color: #2196F3;
            color: white;
            cursor: pointer;
            user-select: none;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h1>点击速度检测工具</h1>
    <div id="clickArea" onclick="startTest()">点击这里开始测试！</div>
    <div id="restartButton" onclick="resetTest()">重新开始</div>
    <p>自定义秒数：<input type="number" id="customSeconds" value="10" min="1" max="999" /></p>
    <p>倒计时：<span id="timer">10</span> 秒</p>
    <p>点击次数：<span id="clickCount">0</span></p>
    <p>点击速度（每秒）：<span id="clickSpeed">0</span></p>
    <script>
        let clickCount = 0;
        let startTime = null;
        let elapsedTime = 0;
        let timer;
        let countdown;

        function startTest() {
            if (startTime === null) {
                timer = parseInt(document.getElementById('customSeconds').value);
                document.getElementById('timer').innerText = timer;
                startTime = new Date().getTime();
                countdown = setInterval(updateTimer, 1000);
                const clickArea = document.getElementById('clickArea');
                clickArea.onclick = recordClick;
                clickArea.ontouchstart = recordTouch; // 触屏点击事件
                clickArea.innerText = ''; // 隐藏按钮上的文字
            }
        }

        function recordClick() {
            clickCount++;
            updateClickCount();
            calculateClickSpeed();
        }

        function recordTouch() {
            document.getElementById('clickArea').onclick = null;
            clickCount++;
            updateClickCount();
            calculateClickSpeed();
        }

        function updateClickCount() {
            const clickCountElement = document.getElementById('clickCount');
            clickCountElement.innerText = clickCount;
        }

        function calculateClickSpeed() {
            elapsedTime = (new Date().getTime() - startTime) / 1000;
            const clickSpeedElement = document.getElementById('clickSpeed');
            clickSpeedElement.innerText = (clickCount / elapsedTime).toFixed(2);
        }

        function updateTimer() {
            timer--;
            const timerElement = document.getElementById('timer');
            timerElement.innerText = timer;

            if (timer === 0) {
                endTest();
            }
        }

        function endTest() {
            clearInterval(countdown);
            const clickArea = document.getElementById('clickArea');
            clickArea.onclick = null;
            clickArea.ontouchstart = null; // 移除触屏点击事件监听器
            clickArea.style.backgroundColor = '#ccc';
            clickArea.innerText = '测试结束';
            calculateClickSpeed(); // 在测试结束后更新平均点击速度
        }

        function resetTest() {
            clearInterval(countdown);
            clickCount = 0;
            startTime = null;
            elapsedTime = 0;
            document.getElementById('clickArea').style.backgroundColor = '#4CAF50';
            document.getElementById('clickArea').innerText = '点击这里开始测试！';
            document.getElementById('clickArea').onclick = startTest;
            updateClickCount();
            calculateClickSpeed();
            timer = parseInt(document.getElementById('customSeconds').value);
            document.getElementById('timer').innerText = timer;
        }
    </script>
</body>

</html>