讓文本鏈出現，並在相同的延遲上消失

如何使一條文本在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>

來源

2014-04-30 Thomas

您的代碼有幾個問題。你打電話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小提琴：http://jsfiddle.net/URfk5/1/

來源

2014-04-30 01:49:28 printr

讓文本鏈出現，並在相同的延遲上消失

回答

相關問題