如何動態替換元素中的文本？

Question

我有一個包含文本行的數據庫。 我的網頁上有很多事情正在進行。 我需要從數據庫中讀取一行文本，將其顯示在頁面的中央，等待“ x”秒，然后閱讀下一行並將其顯示在頁面的中間。 我需要執行此操作而不刷新網頁，也不會干擾頁面上的其他事件。

我已經在讀取和分配文本到變量的地方使用了腳本。 但是，如何使文本顯示在窗口的中心，在其余內容的頂部，然后繼續執行此操作，直到到達文本行的末尾？ 我不是在問如何閱讀文字。 我需要在中間顯示文本的幫助，例如在頁面中間的跨度中。

這是當前代碼。

$query = "SELECT * FROM text_lines WHERE tid='$tsid'";
$result = mysql_query($query) or exit(mysql_error());

$timepause = 6;


while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {  

    $textline = $row['text'];

?>

<script>

document.getElementById("textline").innerHTML = $textline;

</script>

<?php

}

Answer 1

您正在處理三種類型的編程，似乎您可能對它們的作用沒有清楚的了解。

首先，您將創建發送到瀏覽器的HTML。 這就是PHP的作用，它可以在Web服務器上運行。 數據庫代碼是此過程的一部分。 這必須“一次性完成”，您無法運行一些PHP代碼，然后在瀏覽器端“等待幾秒鍾”，然后再運行一些。

然后，您有了CSS。 它被嵌入到HTML中，並指示瀏覽器如何顯示事物。 使用CSS完成在頁面中間的顯示。 這也是“一次嘗試”的操作-瀏覽器收到所有HTML並構建頁面結構之后，但在顯示它之前，它會遍歷頁面並執行CSS來移動內容，設置顏色和字體等。

最后，您有了Javascript，可在頁面加載后在瀏覽器上運行。 這是頁面上唯一可以“異步”執行操作的部分，即不能“一次性執行”，而是先執行一些操作，然后等待，然后再執行其他操作。 或等待鍵盤或鼠標輸入並作出反應。 Javascript使您可以操縱CSS和HTML，並根據PHP腳本最初發送的內容對其進行修改。

我假設您沒有使用AJAX，所以這意味着將要從一開始就使用Javascript處理的所有數據。 您不能讓Java語言去告訴Web服務器運行更多的PHP並發送HTML（這是AJAX所做的）。

因此，您的PHP需要從數據庫中獲取所有文本行，並將其包括在頁面中。 然后，CSS需要隱藏除第一行以外的所有內容。 最后，JavaScript將等待幾秒鍾，更改CSS以隱藏第一行並顯示下一行，然后重復此過程。

Answer 2

您不能直接在javascript中使用PHP變量：

您需要包裝它：

<script>

document.getElementById("textline").innerHTML = <?php echo $textline; ?>

</script>

Answer 3

您可以將文本放在div中，然后將div絕對居中放置，並使用較高的z索引，使其顯示在所有其他元素之上。

要在幾秒鍾后運行代碼，可以使用setInterval（）方法。