Python/Flask/JS - 顯示等待屏幕並在等待 5 秒后繼續

Question

我是 Flask 的超級新手，我正在嘗試使用 Flask 在 python 中構建一個小應用程序......

我想顯示一個等待屏幕，然后在 5 秒后，繼續到下一頁。 問題是，我不知道在沒有按鈕的情況下我應該把這個“動作”放在哪里..正如我現在擁有的那樣，我編寫的python代碼似乎沒有效果..

我的代碼如下：

我有一個waiting_screen.html ：

{% block header %}

<head>
<!-- standard stuff -->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">

<style>
  
  #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
  /* Add animation to "page content" */
  .animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
  }
  @-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
  }
  @keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
  }
  #myDiv {
  display: none;
  text-align: center;
  }
</style>

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css"> -->


</head>


<div class="header-with-image" style="width: 100%; background-color:white; height: 70px; color: white;padding:0px;">
      <img class='banner-image' src="{{ url_for('static', filename='images/logo_header.jpg') }}" style="display: block;
      margin-left: auto;
      margin-right: auto;
      width: 8%;
      margin-bottom:<y>px;">
</div>
<div class="row justify-content-center align-items-center" style="width: 100%;
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
    height:100px;
    background-color:#2c3350;
    margin-top:<x>px;
    text-align: center;">
    <h1>Consolidatie Tool</h1>
</div>
<div class='row head valign-wrapper' >
    <div class='col s8 rellax center-align' data-rellax-speed="-2">
        <br>
        <br>
    </div>
</div>

{% endblock %}


{% block content %}
<div style="padding: 2%;font-family: Verdana; margin:15px; text-align: center;margin-left: auto;height: 40%;
margin-right: auto;background: #ffffff;border-radius:4px;border-color:red;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);width:30%;" >
    <form action="/first-page-info-check" method="POST">

    </form>
    <h4 style="text-align:center"> Bezig om documenten te verwerken... </h4>
    <br>
    <head>
        <div id="loader" action="/first-page-info-check"></div>
        <div style="display:none;" id="myDiv" class="animate-bottom" action="/first-page-info-check">
            <h2>Tada!</h2>
            <p>Some text in my newly loaded page..</p>
        </div >
        <script>
        var myVar;
        function myFunction() {
        myVar = setTimeout(showPage, 3000);
        }

        function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("myDiv").style.display = "block";
        }
        </script>
    </head>

</div>


{% endblock %}

下一頁在 url /first-page-info-check 處稱為confirm_upload.html ，我有以下燒瓶/python 代碼：

@app.route('/first-page-info-check',methods=['POST', 'GET'])
def waiting():
    time.sleep(5)
    return render_template('confirm_upload.html')

我知道我在代碼中的多個位置放置了action="/first-page-info-check" ，這不應該這樣做，但我只是不明白何時應該如何放置動作沒有表格。。

希望可以有人幫幫我：）

Answer 1

JavaScript 超時將在處理函數之前等待給定的時間。 為了避免阻塞其他組件的執行，超時被封裝在一個 Promise 中。 當 Promise 在 5000 毫秒后得到解決時，用戶將被重定向到您的第二個頁面。 從技術上講，您可以直接調用它，但我決定在DOMContentLoaded上調用該函數，以免在加載所有內容之前啟動超時。

function waitForMe() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 5000);
    });
}

document.addEventListener("DOMContentLoaded", function(event) {
    waitForMe().then(() => {
        window.location.href = "/first-page-info-check";
    });
});

Python/Flask/JS - 顯示等待屏幕並在等待 5 秒后繼續

問題描述

1 個解決方案

解決方案1
0 已采納 2020-09-24 23:15:14

Python/Flask/JS - 顯示等待屏幕並在等待 5 秒后繼續

問題描述

1 個解決方案

解決方案1 0 已采納 2020-09-24 23:15:14

解決方案1
0 已采納 2020-09-24 23:15:14