【问题标题】:Display thank you message and redirect to another page显示感谢信息并重定向到另一个页面
【发布时间】:2021-09-29 04:21:14
【问题描述】:

目前,我设法在点击事件后创建警报弹出“谢谢”。 它工作 1 秒并重定向到 https://www.w3schools.com

如何创建不是弹窗提醒,而是一种中间3-4秒“谢谢”的临时空白页?

之后我想被重定向到https://www.w3schools.com

function two() {
  alert('Thanks');
  window.location.href = 'https://www.w3schools.com';
}
<input type="button" onclick="two();" value="Submit">

【问题讨论】:

    标签: javascript onclick href alert form-submit


    【解决方案1】:

    您可以创建一个显示在当前内容上方的启动页面,然后使用超时来重定向用户。

    编辑:将文本移至 CSS 规则。如果您不想这样做,请在 <div class="thanks"> 标记内添加文本并删除 :after CSS 规则。

    function redirect() {
      document.querySelector('.thanks').classList.remove('thanks-hidden');
      setTimeout(() => {
        window.location.href = 'https://www.w3schools.com/';
      }, 3000); // Wait 3 seconds and then redirect.
    }
    .thanks {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 100%;
      background: #FFF;
      justify-content: center;
      align-items: center;
      font-size: 2em;
    }
    
    .thanks:after {
      content: "Thanks";
    }
    
    .thanks-hidden {
      display: none;
    }
    <input type="button" onclick="redirect()" value="Submit">
    <div class="thanks thanks-hidden"></div>

    【讨论】:

    • 非常感谢@Mr。多旋风!我可以以某种方式提高您的评分吗?
    • @VolodyaZhyla 你重视接受我的回复,如果这有助于你实现你想要的行为。
    【解决方案2】:

    你可以使用 setTimeout

    function two() {
      alert('Thanks');
      setTimeout(function() {
        window.location.href = 'https://www.w3schools.com';
      }, 4000 /* ms to delay for*/);
    }
    

    【讨论】:

    • 谢谢,伙计!
    【解决方案3】:

    您可以使用setTimeout 为特定功能设置计时器。可以使用innerHTML清除正文内容。

    function two() {
      alert('Thanks');
      document.body.innerHTML = '';
      setTimeout(() => {
    window.location.href = 'https://www.w3schools.com';
    },4000);
    }
    &lt;input type="button" onclick="two();" value="Submit"&gt;

    【讨论】:

    • 谢谢,伙计!
    猜你喜欢
    • 1970-01-01
    • 2013-09-10
    • 1970-01-01
    • 2019-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-03
    相关资源
    最近更新 更多