用Tampermonkey脚本自动化网页操作并进行数值计算

一、什么是Tampermonkey？

Tampermonkey是一款浏览器扩展，允许用户编写脚本来修改网页的行为和内容。通过它，我们可以实现各种自动化任务，比如自动填充表单、点击按钮、提取数据以及进行数值计算等。

二、安装Tampermonkey

首先，你需要在浏览器中安装Tampermonkey扩展。以Chrome浏览器为例，你可以访问Chrome网上应用店搜索Tampermonkey并安装。安装完成后，浏览器右上角会出现Tampermonkey的图标。

三、创建第一个Tampermonkey脚本

点击Tampermonkey图标，选择“创建新脚本”。此时会打开一个代码编辑器，里面已经有一些基本的代码结构。

基本脚本结构

// ==UserScript==
// @name         自动化脚本示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  这是一个简单的自动化脚本示例
// @author       你的名字
// @match        https://www.ipipp.com/*  // 匹配的网页地址
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 在这里编写你的脚本代码
})();

• @name：脚本的名称。
• @namespace：命名空间，用于区分不同作者的同名脚本。
• @version：脚本的版本号。
• @description：脚本的描述信息。
• @author：脚本的作者。
• @match：指定脚本运行的网页地址，可以使用通配符。
• @grant：指定脚本需要的特殊权限。

四、自动化网页操作

1. 获取页面元素

要操作网页元素，首先需要获取到它们。可以使用document.querySelector()或document.querySelectorAll()方法。

// 获取单个元素
const button = document.querySelector('#submit-button');

// 获取多个元素
const inputs = document.querySelectorAll('input[type="text"]');

2. 模拟点击操作

获取到元素后，可以使用click()方法来模拟点击。

const button = document.querySelector('#submit-button');
if (button) {
    button.click();
}

3. 设置输入框的值

使用value属性来设置输入框的值。

const input = document.querySelector('#username-input');
if (input) {
    input.value = 'your_username';
}

4. 提交表单

可以通过触发表单的submit事件来提交表单。

const form = document.querySelector('#login-form');
if (form) {
    form.submit();
}

五、进行数值计算

在获取到网页中的数据后，我们可以使用JavaScript来进行各种数值计算。

1. 提取数值

假设网页中有一些数值数据，我们可以通过选择器获取这些元素的文本内容，然后将其转换为数字。

const priceElement = document.querySelector('.price');
const price = parseFloat(priceElement.textContent.replace(', ''));

2. 基本数学运算

JavaScript支持基本的数学运算符，如加（+）、减（-）、乘（*）、除（/）等。

const num1 = 10;
const num2 = 5;
const sum = num1 + num2;
const difference = num1 - num2;
const product = num1 * num2;
const quotient = num1 / num2;

3. 复杂计算

我们还可以进行更复杂的计算，比如计算平均值、最大值、最小值等。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
const average = sum / numbers.length;
const max = Math.max(...numbers);
const min = Math.min(...numbers);

六、综合示例

下面是一个综合示例，该脚本会自动填写表单并提交，然后计算页面上某些数值的平均值。

// ==UserScript==
// @name         表单自动填写与数值计算
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动填写表单并计算数值平均值
// @author       你的名字
// @match        https://www.ipipp.com/form-page
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 自动填写表单
    const nameInput = document.querySelector('#name');
    const ageInput = document.querySelector('#age');
    const submitButton = document.querySelector('#submit');

    if (nameInput && ageInput && submitButton) {
        nameInput.value = 'John Doe';
        ageInput.value = '30';
        submitButton.click();
    }

    // 等待页面加载完成后再进行数值计算
    window.addEventListener('load', function() {
        const valueElements = document.querySelectorAll('.value');
        const values = Array.from(valueElements).map(element => parseFloat(element.textContent));
        const sum = values.reduce((acc, curr) => acc + curr, 0);
        const average = sum / values.length;

        console.log('数值总和:', sum);
        console.log('数值平均值:', average);

        // 可以将结果显示在页面上
        const resultElement = document.createElement('div');
        resultElement.textContent = `数值平均值: ${average}`;
        document.body.appendChild(resultElement);
    });
})();

七、注意事项

• 确保你的脚本不会违反网站的使用条款。
• 不同的网站可能有不同的结构和行为，需要根据实际情况调整脚本。
• 在进行数值计算时，要注意数据的类型和精度问题。
• 可以使用console.log()方法来调试脚本，查看变量的值和执行流程。

通过以上步骤，你就可以开始编写自己的Tampermonkey脚本，实现网页操作的自动化和数值计算了。不断尝试和实践，你会发现更多有趣的应用场景。

Tampermonkey脚本 网页自动化 JavaScript数值计算 油猴教程 数据提取