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


How do i replace text in a element dynamically?

我有一个包含文本行的数据库。我有一个网页,里面有很多事情要做。我需要从数据库中读取一行文本,将其显示在页面中心,等待"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
}

您正在处理三种类型的编程,似乎您可能对它们的作用没有清楚的了解。

首先,创建发送给浏览器的HTML。这就是PHP所做的,它运行在web服务器上。数据库代码是这个过程的一部分。这必须在"一次"中完成,你不能运行一些PHP代码,然后在浏览器端"等待几秒钟",然后运行更多的代码。

然后是CSS。它被嵌入到HTML中,并指示浏览器如何显示内容。将跨度显示在页面中间是通过CSS实现的。这也是一个"一次性"操作——在浏览器接收到所有的HTML并构建页面结构之后,但在显示它之前,它会遍历页面并执行CSS来移动内容,设置颜色和字体等。

最后是Javascript,它在加载页面后在浏览器上运行。这是页面中唯一可以"异步"执行任务的部分,也就是说,不是"一次性"执行,而是先执行其中的一部分,然后等待,之后再执行更多的任务。或者等待键盘或鼠标输入并对其做出反应。Javascript允许您操作CSS和HTML,根据最初从PHP脚本发送的内容对其进行修改。

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

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

你可以把文本放在div中,然后把div绝对放在中间,并使用高z-index,这样它就会出现在所有其他元素之上。

要在数秒后运行代码,可以使用setInterval()方法

不能在javascript中直接使用PHP变量:

你需要换行:

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