如何让一段文字在5秒内出现，另一段文字在5秒内消失？我可以单独做任何一个，但两个都不行。我已经在下面发布了代码。我试图为其中一个函数重命名一些函数，而另一个保持不变，但那没有用，所以我撤消了它。
<script>
// First strand of text
window.onload = function(){
var theDelay = 5;
var timer = setTimeout("showText()",theDelay*1000)
}
function showText(){
document.getElementById("delayedText").style.visibility = "visible";
}
</script>
</head>
<body>
<div id="delayedText" style="visibility:hidden">
This text will appear after 5 seconds
</div>
<script>
// Second strand of text
window.onload = function(){
var theDelay = 5;
var timer = setTimeout("showText()",theDelay*1000)
}
function showText(){
document.getElementById("delayedText").style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="delayedText" style="visibility:visible">
This text will disappear after 5 seconds
</div>
最佳答案
您的代码存在一些问题。您正在调用 window.onload 两次，这是不必要的。您应该捆绑所有函数并在 window.onload 中调用它们。
其次，要隐藏和显示的两个元素各自有“delayedText”的ID，这意味着两个不同的功能(一个隐藏，一个显示)同时作用于同一个对象，并相互抵消。
对象 ID 应该是唯一的。创建两个具有唯一 ID 的对象，并在同一个函数中分别调用它们。
// Set the timer
var theDelay = 5;
function timer() {
setTimeout( function(){
toggleText();
}, theDelay * 1000 );
}
// Call the timer
timer();
// Toggle visibility
function toggleText() {
document.getElementById("toShow").style.visibility = "visible";
document.getElementById("toHide").style.visibility = "hidden";
}
JS fiddle :http://jsfiddle.net/URfk5/1/
关于html - 使一段文本出现，另一段在相同的延迟下消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23377690/