Question

如何在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>

Answer 1

您的代码存在一些问题。您正在调用window.onload两次，这是不必要的。您应该捆绑所有函数并在window.onload内调用它们。

其次，要隐藏和显示的两个元素都具有ID“delayedText”，这意味着两个不同的函数（一个隐藏，一个显示）同时作用于同一个对象，并且相互取消。

对象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小提琴：http://jsfiddle.net/URfk5/1/

使文本链出现，另一个文本在同一延迟时消失

1 个答案: