如何实现点击按钮后重复100次下载图片？

原代码存在几个关键问题，导致无法正常工作：

• while循环语法错误，缺少括号包裹条件
• 循环变量i--会导致死循环，应该改为递增i++
• 仅获取a标签元素，但没有触发下载的点击动作
• 缺少触发逻辑的按钮

以下是修正后的代码，实现点击按钮后触发100次图片下载：

<body id="body">
  <center>
    <button id="startDownload">开始批量下载</button>
    <a href="EXAMPLE.PNG" download="EXAMPLE.PNG" id="download" style="display:none;"></a>
  </center>

  <script>
    const downloadBtn = document.getElementById('startDownload');
    const downloadLink = document.getElementById('download');

    downloadBtn.addEventListener('click', () => {
      let count = 0;
      // 使用定时器避免浏览器拦截，每次下载间隔一点时间
      const downloadInterval = setInterval(() => {
        if (count < 100) {
          // 每次下载修改文件名，避免覆盖
          downloadLink.download = `EXAMPLE_${count + 1}.PNG`;
          downloadLink.click();
          count++;
        } else {
          clearInterval(downloadInterval);
          alert('批量下载完成');
        }
      }, 100); // 间隔100ms，可根据需求调整
    });
  </script>
</body>

关键修改说明： #

• 添加可见触发按钮，点击后启动批量下载逻辑
• 使用addEventListener绑定点击事件，确保逻辑在用户交互后执行（避免浏览器拦截）
• 用定时器分批触发下载，避免一次性触发被浏览器判定为恶意行为而拦截
• 动态修改下载文件名，避免100次下载的文件互相覆盖
• 隐藏原a标签，避免页面上出现多余元素

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