如何在弹出窗口显示倒计时计数器，计数到0后自动关闭窗口

问题原因 #

• 触发时机错误：window.onload = contar 会在父页面加载完成后立刻执行contar函数，此时用户还未点击按钮打开新窗口，ventana变量为undefined，直接报错阻塞逻辑。
• 元素操作顺序错误：先尝试获取新窗口的contador元素赋值，之后才向新窗口写入该元素的HTML代码，必然找不到对应元素。
• 无倒计时逻辑：当前代码仅执行一次计数，没有设置定时器逐秒减少数值，无法实现倒计时效果。
• 随机数范围错误：Math.floor(Math.random() * 100)生成的是0_{99的整数，不符合1}100的需求。

修复后的完整代码 #

<body>
  <input type="button" value="Abrir" onclick="abrir()">
  <script>
    var ventana;
    var timer;

    function abrir() {
      // 打开新窗口
      ventana = window.open("", "new_window", "width=800,height=500,status=no,toolbar=no,menubar=no");
      // 先写入新窗口的基础HTML
      ventana.document.write("tu contador:<span id='contador'></span>");
      // 生成1~100的随机初始计数
      let contartiempo = Math.floor(Math.random() * 100) + 1;
      // 首次赋值显示
      ventana.document.getElementById('contador').innerHTML = contartiempo;
      // 启动倒计时定时器，每秒执行一次
      timer = setInterval(() => {
        contartiempo--;
        ventana.document.getElementById('contador').innerHTML = contartiempo;
        if (contartiempo <= 0) {
          clearInterval(timer);
          ventana.close();
        }
      }, 1000);
    }
  </script>
</body>

补充说明 #

• 原代码中input的type用submit会默认触发表单提交，改为button更符合当前无表单的场景。
• 新增了定时器清理逻辑，避免内存泄漏。
• 所有对新窗口的DOM操作都放在打开新窗口之后执行，避免空对象报错。

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