在表单部分设置超时

debugcn 发表于 Dev

岑蛋

<!DOCTYPE html>

<head>
  <base target="_top">

  <script type="text/javascript">
    function f() {
      var refresh = document.getElementById('form');
      timer = setTimeout('f()', 1000);
      if (timer == 10) {
        clearTimeout(timer);
        refresh.src = 'New URL';
      }
    }

  </script>

</head>

<body onload="f()">

  <p>Complete the form</p>

  <form id="form" action="URL" target="_self" method="POST">
    <div><input type="text" placeholder="name" required name="Name"></div>
    <div><input type="email" placeholder="email" required name="E-mail"></div>
    <div><button type="submit">Send</button></div>
  </form>

</body>

</html>

基于上面的代码，我需要这样做：

页面加载10秒后，将页面中的表单部分替换为“新网址”

由于某种原因，它不起作用。任何帮助将不胜感激。提前致谢

塞多米尔·拉科夫（Cdomirir Rackov）

问题是那timer == 10将永远不会发生。timer变量是取消计时器的参考。这是固定版本

<!DOCTYPE html>
<html>
  <head>
    <style>
      .content {
        color: red;
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <p>Complete the form</p>
    <form id="form" action="URL" target="_self" method="POST">
      <div><input type="text" placeholder="name" required name="Name"></div>
      <div><input type="email" placeholder="email" required name="E-mail"></div>
      <div><button type="submit">Send</button></div>
    </form>
    <div id="content" style="display: none;" class="content">
      This is new content!
    </div>



    <script type="text/javascript">
      function f() {
        const elementToHide = document.getElementById("form");
        elementToHide.style.display = 'none';
        const elementToShow = document.getElementById("content");
        elementToShow.style.display = 'block';
      }
      const timerRef = setTimeout(f, 1000 * 10);

    </script>
  </body>

</html>

这里是JSFiddle的更新链接，因此您可以进行检查。

另外，这里是一个链接，您可以在其中了解有关超时的更多信息。

编辑：

对于内容更改，我将隐藏表单并显示可以像其他任何元素一样设置样式的新内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。