带有时间限制的HTML文本

时间：2011-12-30 07:17:20

标签： javascript html

我想知道如何在html中显示一些文字几秒钟？我希望在我的网站上有一个加载标志显示10秒钟，然后消失。我怎么能这样做呢？我经常不使用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>

3 个答案:

答案 0 :(得分：3)

这可能适合你。 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>

答案 1 :(得分：2)

你可以用普通的javascript和HTML这样做，因为你没有要求使用任何框架，如jQuery或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/

答案 2 :(得分：0)

您可以使用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>
相关问题
最新问题