帶有時間限制的HTML文本

我想知道如何能夠在html中顯示一些文本幾秒鐘？我想在我的網站上加載一個標誌，顯示10秒鐘，然後離開。我怎麼能這樣做呢？我不經常使用HTML。帶有時間限制的HTML文本

代碼我想添加加載和Flash到。

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<title>Catalog</title> 

</head> 

<body> 

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="590" id="AutoNumber1" height="32"> 
    <tr> 
     <td width="320" height="77" bgcolor="#FFFFFF"> 
     <p align="center">  <img border="0" src="images/logoblue.gif" width="307" height="61"></td> 
<td width="380" height="77"> 
     <p align="center"><b><font size="5">PRODUCTS, INC.<br> 
</font></b><font size="4"></font></td> 
    </tr> 
    <tr> 
     <td width="590" height="10" bgcolor="#FFFFFF" colspan="2"> 
     <img border="0" src="images/divid1.gif" width="700" height="10"></td> 
    </tr> 
</table> 
<p>&nbsp;</p> 
<p> 
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="842" height="539"> 
    <param name="movie" value="catalog.swf"> 
    <param name="quality" value="High"> 
    <embed src="catalog.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object> 
</p> 

</body></html>

更新代碼Virendra的變化：一個更新的

<html> 

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<title>Catalog</title> 
<style type='text/css'> 
    #swf_file{display:none;} 
    </style> 
    <script type='text/javascript'> 
var timePeriodInMs = 20000; 

setTimeout(function() 
{ 
    document.getElementById("texttohide").style.display = "none"; 
    document.getElementById("swf_file").style.display = "block"; 
}, 
timePeriodInMs); 
</script> 
</head> 

<body> 

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="590" id="AutoNumber1" height="32"> 
    <tr> 
     <td width="320" height="77" bgcolor="#FFFFFF"> 
     <p align="center">  <img border="0" src="images/logoblue.gif" width="307" height="61"></td> 
<td width="380" height="77"> 
     <p align="center"><b><font size="5">PRODUCTS, INC.<br> 
</font></b><font size="4"></font></td> 
    </tr> 
    <tr> 
     <td width="590" height="10" bgcolor="#FFFFFF" colspan="2"> 
     <img border="0" src="images/divid1.gif" width="700" height="10"></td> 
    </tr> 
</table> 

<div id="texttohide"> 
    <img border="0" src="loading.gif" width="144" height="138"></div> 
<div id="swf_file"><object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="842" height="539"> 
    <param name="movie" value="catalog.swf"> 
    <param name="quality" value="High"> 
    <embed src="catalog.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object> 
</div> 

<p> 
</p> 

</body></html>

更新

<html> 

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<title>Catalog</title> 
<style type='text/css'> 
    #swf_file{display:none;} 
    #swf_file{height:1px; width:1px;} 
    </style> 
    <script type='text/javascript'> 
var timePeriodInMs = 10000; 

setTimeout(function() 
{ 
    document.getElementById("texttohide").style.display = "none"; 
    document.getElementById("swf_file").style.height = "138px"; 
    document.getElementById("swf_file").style.width = "144px"; }, 
timePeriodInMs); 
</script> 
</head> 

<body> 

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="590" id="AutoNumber1" height="32"> 
    <tr> 
     <td width="320" height="77" bgcolor="#FFFFFF"> 
     <p align="center">  <img border="0" src="images/logoblue.gif" width="307" height="61"></td> 
<td width="380" height="77"> 
     <p align="center"><b><font size="5">PRODUCTS, INC.<br> 
</font></b><font size="4"></font></td> 
    </tr> 
    <tr> 
     <td width="590" height="10" bgcolor="#FFFFFF" colspan="2"> 
     <img border="0" src="images/divid1.gif" width="700" height="10"></td> 
    </tr> 
</table> 

<div id="texttohide"> 
    <b><font size="5">Loading for a few seconds...</font></b></div> 
<div id="swf_file"> 
    <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="879" height="564"> 
    <param name="movie" value="catalog.swf"> 
    <param name="quality" value="High"> 
    <embed src="catalog.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="879" height="564"></object> 
</div> 

<p> 
</p> 

</body></html>

來源

2011-12-30 Aubtin Samai

你將不得不使用JavaScript/jQuery的這一點。 – Virendra 2011-12-30 07:18:25

爲什麼你想要顯示一個恆定的10秒加載而不是等到它實際加載？ – icktoofay 2011-12-30 07:18:55

你有密碼嗎？ – Joseph 2011-12-30 07:18:58

這可能爲你工作。 http://jsfiddle.net/KyC3N/

<html> 
    <head> 
    <title>Hide Text demo</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#texttohide').delay(5000).fadeOut(); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="texttohide"> Text to hide in 5 seconds </div> 
    </body> 
</html>

更新：根據更新的要求。
這個小提琴只使用JavaScript。它會顯示一個div 5秒鐘，然後隱藏它並顯示另一個div。 http://jsfiddle.net/xZEvb/

下面是完整的代碼

<!DOCTYPE html> 
<html> 
<head> 
    <style type='text/css'> 
    #swf_file{display:none;} 
    </style> 

<script type='text/javascript'> 
var timePeriodInMs = 5000; 

setTimeout(function() 
{ 
    document.getElementById("texttohide").style.display = "none"; 
    document.getElementById("swf_file").style.display = "block"; 
}, 
timePeriodInMs); 
</script> 
</head> 
<body> 
    <div id="texttohide"> Text to hide in 5 seconds </div> 
    <div id="swf_file">This is swf file</div> 
</body> 
</html>

來源

2011-12-30 07:20:56 Virendra

該OP沒有要求jQuery。 – jfriend00 2011-12-30 07:22:56

@ jfriend00 - OP似乎沒有太多的HTML經驗，這就是爲什麼他可能沒有要求js ...除此之外，我從來沒有聽說過HTML中的標籤......：o – mac 2011-12-30 07:27:44

這就是爲什麼我提供了一個使用常規JavaScript，而不是jQuery的答案。這裏的一般規則是你不使用jQuery提供答案，除非OP要求使用jQuery或使用jQuery對其進行標記。 – jfriend00 2011-12-30 07:29:46

你可以用普通的做這樣的JavaScript和HTML，因爲你沒有要求使用任何框架如jQuery o的解決方案r YUI：

<div id="tempMessage" style="display: none;">This is my message</div> 

function showMessage(text, time) { 
    var o = document.getElementById("tempMessage"); 
    o.style.display = "block"; 
    o.innerHTML = text; 
    setTimeout(function() { 
     o.style.display = "none"; 
    }, time); 
}

時間值是您希望消息顯示的毫秒數。文本可以是任何HTML。該消息將顯示在您將HTML消息放入頁面的位置。

樣品實施：http://jsfiddle.net/jfriend00/ePxLB/

來源

2011-12-30 07:20:25 jfriend00

抱歉，對錯誤的評論。大聲笑 – 2011-12-30 07:27:03

可以使用CSS3 animation和@keyframes做到這一點不使用JavaScript。 position: absolute;將防止飛濺影響任何佈局，並且height: 0動畫完成後不會受到影響。

演示：http://jsfiddle.net/ThinkingStiff/SwV9m/

CSS：

#splash { 
    animation:    splash 3s linear; /* 3s for 3 seconds */ 
     -moz-animation: splash 3s linear; 
     -webkit-animation: splash 3s linear; 
      -ms-animation: splash 3s linear; 
    border: 1px solid black; 
    height: 100px; 
    line-height: 100px; 
    opacity: 0; 
    position: absolute; 
    text-align: center; 
    width: 250px; 
    z-index: 1; 
} 

@keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;} 
    100% {height: 0px;} } 
@-moz-keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;} 
    100% {height: 0px;} } 
@-webkit-keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;} 
    100% {height: 0px;} } 
@-ms-keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;} 
    100% {height: 0px;} }

HTML：

<div id="splash">3 second splash!</div>

來源

2011-12-30 07:51:04 ThinkingStiff

感謝您的回覆。我需要一個標準的解決方案，正如你所說，它不受Internet Explorer 9支持，所以我不可能使用它。不過謝謝。 – 2011-12-30 07:59:02

帶有時間限制的HTML文本

回答

相關問題