当前位置: 首页 > 知识库问答 >
问题:

javascript - 脚本怎么实现网页元素操作及数值计算?

金坚
2024-07-09

我想要做出一个自动点击“激励”按钮,然后提取“当前效率”的数值
代入公式\( (100-“当前效率”)×344 \)

操作界面

计算出结果之后输入到输入框里,再点击确定按钮,并向下循环,直到所有“当前效率”的值都为100。

输入界面

最好能用浏览器内嵌编译器。

我尝试写了一个脚本,通过Tampermonkey在浏览器中运行。

// ==UserScript==
// @name         自动点击并计算脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  根据网页上的数字自动计算并输入文本,然后自动点击确定按钮
// @author       You
// @match        http://spdq.natapp1.cc/estgzweb/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    
    const specificButtonSelector = 'body > div:nth-child(5) > div > div > div > div.ant-modal-content > div.ant-modal-body > div > div.ant-table-wrapper > div > div > div > div > div.ant-table-body > table > tbody > tr:nth-child(2) > td:nth-child(8)';
    const numberElementSelector = '/html/body/div[4]/div/div/div/div[2]/div[2]/div/div[2]/div/div/div/div/div[2]/table/tbody/tr[2]/td[5]';
    const inputElementSelector = '/html/body/div[5]/div/div[2]/div/div[2]/div[2]/div/div[2]/input'; 
    const confirmButtonSelector = '/html/body/div[5]/div/div[2]/div/div[2]/div[3]/button[2]'; 

    const specificButton = document.querySelector(specificButtonSelector);
    const numberElement = document.querySelector(numberElementSelector);
    const inputElement = document.querySelector(inputElementSelector);
    const confirmButton = document.querySelector(confirmButtonSelector);

    if (!specificButton || !numberElement || !inputElement || !confirmButton) {
        console.error('无法找到所有必需的元素');
        return;
    }

    const numberText = numberElement.textContent.trim();
    const number = parseFloat(numberText); 

    if (isNaN(number)) {
        console.error('无法获取有效的数字');
        return;
    }

    const calculatedValue = 100 - number * 344 ; 

    inputElement.value = calculatedValue.toString();

    specificButton.click()

    confirmButton.click();
})();

但它不能运行,因为我编程能力有限,没能排查出问题。

共有2个答案

何修能
2024-07-09

看着有两个问题:

  1. querySelector 选择器写错了;
  2. click点击操作不能连着写,要有个先后,还是要根据【点激励->输入->确认 】这个流程去做。

另外,脚本的启动与停止,最好给自己预留一些操作和相关日志监控,方便控制。

刘阳荣
2024-07-09

Excel VBA 本身并不能直接操作网页元素,因为 VBA 是设计用于操作 Excel 工作簿和 UI 的,而不是用于操作网页。不过,你可以通过几种间接的方式来实现你的需求:

  1. 使用外部工具:你可以使用如 Selenium 这样的自动化工具来操作网页,并将结果写回 Excel。Selenium 可以通过 VBA 调用,但通常需要使用其他语言(如 Python、C# 或 Java)来编写 Selenium 脚本。
  2. 使用 API:如果网页提供了 API 接口,你可以通过 VBA 调用这些 API 来获取数据,然后在 Excel 中进行计算。
  3. IE 浏览器和 Excel VBA 交互(不推荐):对于旧版本的 Internet Explorer 浏览器,你可以使用 VBA 来操作其 DOM,但这并不是一个好的做法,因为 IE 已经被微软淘汰,且不支持现代网页技术。

考虑到你的情况,我将给出一个使用 Selenium(以 Python 为例)和 VBA 结合的简化流程,但请注意这并非一个完整的解决方案,因为具体实现将取决于你的具体需求和网页的结构。

1. 使用 Selenium 编写 Python 脚本

你可以使用 Selenium 来自动化网页操作,提取所需的数据,然后写回文件(例如 CSV 或 TXT),这个文件随后可以被 Excel VBA 读取。

2. 使用 VBA 读取外部文件

一旦 Python 脚本将数据写入了文件,你可以使用 VBA 来读取这个文件,并在 Excel 中进行进一步的处理。

示例 VBA 代码(读取 CSV 文件)

Sub ReadDataFromCSV()
    Dim filePath As String
    Dim textLine As String
    Dim textRange As Range
    Dim i As Long
    
    ' 设定文件路径
    filePath = "C:\path\to\your\file.csv"
    
    ' 假设第一列是“当前效率”,第二列是计算后的值
    i = 1
    With ActiveSheet.QueryTables.Add(Connection:="TEXT;" & filePath, _
        Destination:=Range("A" & i))
        .TextFileParseType = xlDelimited
        .TextFileCommaDelimiter = True
        .Refresh BackgroundQuery:=False
    End With
    
    ' 在这里添加你的逻辑来处理读取的数据
    ' ...
End Sub

注意:

  • 你需要安装并配置 Selenium 和相应的浏览器驱动(如 ChromeDriver)。
  • 你可能需要调整 Selenium 脚本以适应网页的实际结构和行为。
  • VBA 读取外部文件的方法可能因文件格式而异(例如,对于 TXT 文件,你可能需要使用 OpenTextFile 方法)。
  • 如果你决定使用这种方法,请确保你的脚本和数据处理是安全的,并且符合所有相关的法律和隐私要求。
 类似资料:
  • 本文向大家介绍javascript实现对表格元素进行排序操作,包括了javascript实现对表格元素进行排序操作的使用技巧和注意事项,需要的朋友参考一下 我们在上网中都能看到很多能够排序的,如大小、时间、价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序。 设置表格的背景颜色代码,导入的css: css代码: 效果图-----排序之前: 升序: 降序

  • 本文向大家介绍AngularJS实现表单元素值绑定操作示例,包括了AngularJS实现表单元素值绑定操作示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了AngularJS实现表单元素值绑定操作。分享给大家供大家参考,具体如下: ng-disabled:绑定控件的disabled属性 ng-show:显示或者隐藏元素:ms-visible ng-hide:和ng-show的功能恰好相反

  • 本文向大家介绍JavaScript中计算网页中某个元素的位置,包括了JavaScript中计算网页中某个元素的位置的使用技巧和注意事项,需要的朋友参考一下 由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题。之前我写过一篇文章介绍过一种方法,先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置

  • 本文向大家介绍JavaScript及jquey实现多个数组的合并操作,包括了JavaScript及jquey实现多个数组的合并操作的使用技巧和注意事项,需要的朋友参考一下 1、原生的JavaScript实现 我要合并后变成下面这样: 可以使用 2、Jquery实现

  • 本文向大家介绍jQuery插件jRumble实现网页元素抖动,包括了jQuery插件jRumble实现网页元素抖动的使用技巧和注意事项,需要的朋友参考一下 jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制

  • QueryList不仅可以读取DOM元素的属性值,还可以操作DOM元素。 在采集单元素章节,我们接触到了find()方法,它用于选择DOM元素,返回值为QL\Dom\Elements对象,这是QueryList内置的一个DOM元素集合对象,它拥有几乎所有与jQuery操作DOM完全相同的API。 熟悉jQuery的同学应该知道jQuery操作DOM的API方法非常的多,QueryList几乎全部支