Laravel广告展示页实现点击广告后启动进度条的代码修改方案

核心修改思路 #

原有逻辑将进度条启动函数move()绑定在window.onload事件上，页面加载即自动计时，跳过了用户主动点击广告的校验环节，修改核心是把进度条触发时机从页面加载完成改为用户主动点击广告区域，同时控制验证码模块在进度条加载满100%前保持隐藏。

具体修改步骤 #

1. 移除自动启动逻辑 #

找到原有代码中绑定页面加载自动启动进度条的代码段，直接删除即可，常见写法如下：

// 删掉下面这行自动触发的代码
// window.onload = move;

2. 给广告区域绑定点击触发事件 #

首先给广告内容的外层容器加唯一标识，方便绑定事件，注意不要把后续要展示的验证码、提交按钮包进这个容器里：

<!-- 广告内容容器，加id用于定位 -->
<div id="ad-view-area" class="ad-container">
    <!-- 原有广告图片、文案、跳转链接等内容全部放这里 -->
</div>

<!-- 验证码模块默认隐藏，进度满了再显示 -->
<div id="captcha-block" style="display: none;margin-top: 20px;">
    <!-- 原有算术验证码输入框、提交按钮放这里 -->
</div>

然后写点击事件绑定逻辑，加防重复触发标记，避免用户多次点击导致进度条重复运行：

// 进度条启动标记，防止重复触发
let isProgressRunning = false;
const adArea = document.getElementById('ad-view-area');

adArea.addEventListener('click', function () {
    // 已经启动过进度条就直接返回，不重复执行
    if (isProgressRunning) return;
    isProgressRunning = true;
    // 点击后才启动进度条计时
    move();
    // 可选：加浏览中的视觉提示，比如加高亮边框、改提示文案
    adArea.classList.add('browsing-status');
    document.getElementById('progress-tip').innerText = '广告浏览中，请等待进度完成';
});

3. 修改进度条回调，满进度后展示验证码 #

找到原有move()进度条函数，在进度走到100%的分支里加入显示验证码模块的逻辑，参考修改后的代码：

function move() {
    const bar = document.getElementById('progress-bar');
    let progress = 0;
    // 按照你原有的计时间隔调整，比如原来每100毫秒走1%，就是10秒走完
    const timer = setInterval(() => {
        progress++;
        bar.style.width = progress + '%';
        bar.textContent = progress + '%';

        // 进度到100%时的逻辑
        if (progress >= 100) {
            clearInterval(timer);
            // 显示验证码模块
            document.getElementById('captcha-block').style.display = 'block';
        }
    }, 100);
}

4. 后端兜底校验（必加，防前端绕过） #

只改前端可以被用户通过控制台改代码绕过，需要在Laravel端加校验：

• 用户点击广告触发进度条时，发一个轻量请求把当前时间戳存到Session里，比如存ad_view_start_at
• 用户提交验证码领收益的接口里，判断当前时间和ad_view_start_at的差值是否大于等于进度条总时长（比如进度条10秒走完，差值小于10秒的请求直接返回"浏览时长不足"的错误）
• 校验完成后记得清掉Session里的ad_view_start_at标记，防止重复提交

注意事项 #

• 广告区域的点击事件不要冒泡到外层容器，也不要把验证码、提交按钮划入广告点击区域，避免误触发
• 如果广告本身有跳转链接，可以在点击启动进度条的时候阻止默认跳转，等进度完成后再允许跳转，或者改成新标签页打开广告，不影响当前页计时

内容的提问来源于stack exchange，提问作者Sanaul Dey