如何从指定Class元素提取数字，实现JS定时点击按钮功能？

嘿，我来帮你搞定这个自动点击的需求！核心就是从<h4 class="Timer h4">里提取剩余时间数字，然后计算触发点击的时机对吧？先帮你修正原代码里的小问题，再补上数字提取的逻辑：

关键修正点和逻辑说明 #

• 原代码里的getElementByClassName要改成getElementsByClassName（复数形式），因为这个方法返回的是匹配元素的集合，我们需要取第一个元素[0]
• 提取时间数字用正则表达式最靠谱，能精准匹配文本里的小数格式（比如14.22）
• 提前创建点击事件，避免每次定时检查都重复创建，优化性能
• 增加元素存在性检查，防止DOM元素未加载或被移除时出现报错

完整实现代码 #

// 提前创建点击事件，不用重复初始化
var clickEvent = document.createEvent("MouseEvents");
clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// 获取目标按钮元素
var targetBtn = document.getElementsByClassName("button1")[0];

// 每15秒检查一次计时器状态
setInterval(function() {
    // 获取计时器元素
    var timerElement = document.getElementsByClassName("Timer h4")[0];
    if (!timerElement) return; // 元素不存在时直接返回，避免报错
    
    // 获取计时器文本内容
    var timerText = timerElement.textContent;
    
    // 用正则提取文本中的小数数字（匹配格式：数字.数字）
    var timeMatch = timerText.match(/\d+\.\d+/);
    if (!timeMatch) return; // 没匹配到数字时直接返回
    
    // 将提取到的字符串转为浮点数
    var remainingTime = parseFloat(timeMatch[0]);
    
    // 计算需要延迟的时间：剩余时间转毫秒 - 100毫秒
    var delayTime = remainingTime * 1000 - 100;
    
    // 确保延迟时间不小于0，避免setTimeout立即执行
    if (delayTime < 0) delayTime = 0;
    
    // 设置定时器，到点自动点击按钮
    setTimeout(function() {
        targetBtn.dispatchEvent(clickEvent);
    }, delayTime);
}, 15000);

// 原按钮点击函数保持不变
function x3a() {
    document.getElementById("x3").innerHTML = 1;
}

对应的HTML结构：

<h4 class="Timer h4">Time expire in 14.22</h4>
<p id="x3"></p>
<button data-g="red" class="button1" onclick="x3a()">OK</button>

补充说明 #

• 用textContent代替innerHTML来获取文本，因为我们只需要纯文本内容，textContent更安全且不受HTML标签影响
• 正则表达式/\d+\.\d+/的含义：匹配一个或多个数字（\d+），加上小数点（\.），再匹配一个或多个数字（\d+），完美适配你的时间格式
• 加入delayTime < 0的判断，防止剩余时间已经不足100毫秒时，setTimeout执行负数时间导致立即点击

内容的提问来源于stack exchange，提问作者badu fasil