如何动态替换元素中的文本？

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（）方法。