如何实现页面10秒后自动跳转至下一页无需点击？

要实现10秒后自动跳转，只需用JavaScript的setTimeout函数延迟执行按钮点击操作即可，以下是具体修改方案：

基础版：仅延迟10秒自动点击 #

替换你当前的立即跳转脚本为以下代码：

<script>
var buttonElement = document.querySelector('.btn.btn-primary');
if (buttonElement) {
    // 延迟10秒（10000毫秒）后触发按钮点击
    setTimeout(() => {
        buttonElement.click();
    }, 10000);
}
</script>

进阶版：添加倒计时提示（优化用户体验） #

为了让用户清楚知晓跳转剩余时间，可在页面中添加倒计时显示，同时支持手动点击按钮后停止倒计时：

修改后的表单HTML代码 #

<div class="col-md-<?= $col_num ?>">
    <?= $this->Flash->render() ?>

    <?= $this->Form->create(null, ['id' => '']); ?>
    <?= $this->Form->hidden('action', ['value' => 'continue']); ?>
    <?= $this->Form->hidden('page', ['value' => $page + 1]); ?>
    <?= $this->Form->button(__('Click here to continue - Step (1/2)'), ['class' => 'btn btn-primary',]); ?>
    <!-- 新增倒计时提示 -->
    <p style="margin-top:10px;">页面将在 <span id="countdown">10</span> 秒后自动跳转，或点击按钮立即继续</p>
    <?= $this->Form->end() ?>
</div>

带倒计时的JavaScript脚本 #

<script>
const buttonElement = document.querySelector('.btn.btn-primary');
const countdownElement = document.getElementById('countdown');
let remainingSeconds = 10;

if (buttonElement) {
    // 启动倒计时定时器
    const countdownTimer = setInterval(() => {
        remainingSeconds--;
        countdownElement.textContent = remainingSeconds;
        
        if (remainingSeconds <= 0) {
            clearInterval(countdownTimer);
            buttonElement.click();
        }
    }, 1000);

    // 点击按钮时清除倒计时，避免重复触发
    buttonElement.addEventListener('click', () => {
        clearInterval(countdownTimer);
    });
}
</script>

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