如何在ClickFunnels单个HTML/JS元素中正常运行计时器脚本

• onLoad事件是页面/资源加载完成事件，仅支持body、框架、图片、脚本这类会触发资源加载的标签，普通div属于容器类标签，本身没有加载生命周期，绑定onLoad不会有任何效果。
• ClickFunnels的自定义HTML/JS元素是嵌入到已渲染完成的宿主页面中，不存在独立的body上下文，原代码依赖body的onLoad触发逻辑自然无法执行。

把下面整段代码直接粘贴到ClickFunnels的自定义HTML/JS元素中即可，不需要额外配置：

<div>
  <span class="timerz">Spots remaining: <span id="counterz">19</span></span>

  <script>
    var timer;
    function startCount() {
      // 提前清理重复定时器，避免编辑器预览、页面重复渲染时计数速度异常
      clearInterval(timer);
      timer = setInterval(count, 500); // 数值越小计数变化越快，数值越大变化越慢
    }

    function count() {
      var rand_no = Math.ceil(3 * Math.random()); // 计数每次递减1-3的随机值
      var el = document.getElementById("counterz");
      // 元素不存在时直接终止执行，避免控制台报错
      if (!el) return;
      var currentNumber = parseFloat(el.innerHTML);
      var newNumber = currentNumber - rand_no;
      if (newNumber > 0) {
        el.innerHTML = newNumber;
      } else {
        el.innerHTML = "1"; // 计数降到最低值后固定显示1
      }
    }

    // 兼容所有加载场景的自动触发逻辑
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", startCount);
    } else {
      startCount();
    }
  </script>
</div>

• 不需要给外层div绑定任何加载类事件，脚本自带兼容触发逻辑，不管元素插入到页面哪个位置都能正常运行
• 代码内置了异常兼容，不会因为ClickFunnels编辑器的重复加载机制出现JS报错、计数速度翻倍的问题
• 可根据实际需求修改计数初始值、递减间隔、随机递减范围参数

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