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

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

您正在处理三种类型的编程，看来您可能对它们的 Angular 色没有清楚的了解。

首先，您创建了发送到浏览器的 HTML。这就是 PHP 的作用，它运行在 Web 服务器上。数据库代码是此过程的一部分。这必须“一次”完成，你不能运行一些 PHP 代码，然后在浏览器端“等待几秒钟”，然后运行更多代码。

然后你就有了CSS。它嵌入到 HTML 中，并指示浏览器如何显示内容。让跨度显示在页面中间是通过 CSS 完成的。这也是一个“一次性”操作——浏览器收到所有 HTML 并构建页面结构后，但在显示之前，它会遍历页面并执行 CSS 来移动内容、设置颜色和字体等。

最后你有了 Javascript，它在页面加载后在浏览器上运行。这是页面中唯一可以“异步”执行操作的部分，即不是“一次性”执行操作，而是执行一些操作，然后等待，然后再执行更多操作。或者等待键盘或鼠标输入并对其使用react。 Javascript 允许您操作 CSS 和 HTML，根据 PHP 脚本最初发送的内容进行修改。

我假设您没有使用 AJAX，所以这意味着 Javascript 操作的所有数据都需要从一开始就在那里。您不能让 Javascript 告诉 Web 服务器运行更多 PHP 并发送 HTML(这就是 AJAX 的作用)。

因此，您的 PHP 需要从数据库中获取所有文本行并将其包含在页面中。然后 CSS 需要隐藏除第一行之外的所有内容。最后，Javascript 将等待几秒钟，更改 CSS 以隐藏第一行并显示下一行，然后重复此过程。