gpt4 book ai didi

Javascript - 试图让它等待

转载 作者:行者123 更新时间:2023-12-02 20:26:32 25 4
gpt4 key购买 nike

好的,所以我试图让这段代码在特定的 div 中以不同的间隔显示文本。 “text1”通常出现在 div 中,但几秒钟后页面加载所有内容都会消失,并且文本可见,但位于空白页面上。

有人可以帮助我,让 text2 和 text3 与其余内容一起出现在 div 中吗?

谢谢。

<script type="text/javascript">
function typeText1()
{
document.write('<p style="color:blue;">text1</p>');
setTimeout( "typeText2();", 1000);
}
function typeText2()
{
document.write('<p style="color:blue;">text2</p>');
setTimeout( "typeText3();", 3000);
}
function typeText3()
{
document.write('<p style="color:blue;">text3</p>');
}
typeText1();
</script>

最佳答案

那是因为您正在使用document.write。它重写整个文档。使用诸如 appendChildreplaceChild 甚至 .innerHTML 之类的方法。

为了简洁起见,我将仅使用innerHTML 作为示例:

<div id="thing"></div>

<script>
(function() {
var thing = document.getElementById('thing');

function typeText1() { thing.innerHTML = '<p>text1</p>'; setTimeout( typeText2, 1000 ); }
function typeText2() { thing.innerHTML = '<p>text2</p>'; setTimeout( typeText3, 1000 ); }
function typeText3() { thing.innerHTML = '<p>text3</p>'; }

typeText1();

})();
</script>

编辑#2:

<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
.one { color:red; }
.two { color:blue; }
.three { color:yellow; }
</style>
</head>
<body>

<p id="thing"></p>

<script>
(function() {
var thing = document.getElementById('thing');

function typeText1() { thing.innerHTML+= 'text1'; thing.className+= ' one'; setTimeout( typeText2, 1000 ); }
function typeText2() { thing.innerHTML+= '<br>text2'; thing.className+= ' two'; setTimeout( typeText3, 1000 ); }
function typeText3() { thing.innerHTML+= '<br>text3'; thing.className+= ' three'; }

typeText1();

})();
</script>

</body>
</html>

关于Javascript - 试图让它等待,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4761787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com