admin管理员组

文章数量:1323529

I am wondering how I would be able to have some text show up for a few seconds in html? I want to have a loading sign in my website to show up for 10 seconds, then go away. How could I go about doing that? I don't use HTML that often.

Code I want to add Loading and flash to.

<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=".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="" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object>
</p>

</body></html>

Updated code with Virendra's changes:

<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=".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="" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object>
</div>

<p>
</p>

</body></html>

Update of an Update

<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=".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="" type="application/x-shockwave-flash" name="obj1" width="879" height="564"></object>
</div>

<p>
</p>

</body></html>

I am wondering how I would be able to have some text show up for a few seconds in html? I want to have a loading sign in my website to show up for 10 seconds, then go away. How could I go about doing that? I don't use HTML that often.

Code I want to add Loading and flash to.

<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./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./go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object>
</p>

</body></html>

Updated code with Virendra's changes:

<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./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./go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object>
</div>

<p>
</p>

</body></html>

Update of an Update

<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./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./go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="879" height="564"></object>
</div>

<p>
</p>

</body></html>
Share Improve this question edited Dec 31, 2011 at 7:30 Aubtin Samai asked Dec 30, 2011 at 7:17 Aubtin SamaiAubtin Samai 1,36114 silver badges24 bronze badges 10
  • 1 you will have to use JavaScript/jQuery for this. – Virendra Commented Dec 30, 2011 at 7:18
  • 2 Why would you want something to show loading for a constant 10 seconds rather than waiting until it has actually loaded? – icktoofay Commented Dec 30, 2011 at 7:18
  • I'm sure it's possible to use some obscure CSS hack to do something like this. – Peter Olson Commented Dec 30, 2011 at 7:20
  • I am trying to show a flash slideshow, I am not sure how to have it show a loading sign until it finishes loading, so I would rather put a set time. Could someone please give me sample code? That would be great. Thanks – Aubtin Samai Commented Dec 30, 2011 at 7:20
  • @icktoofay: I smell a fake loading icon...kinda tacky. – Purag Commented Dec 30, 2011 at 7:20
 |  Show 5 more ments

3 Answers 3

Reset to default 4

This might work for you. http://jsfiddle/KyC3N/

<html> 
  <head> 
    <title>Hide Text demo</title> 
    <script type="text/javascript" src="http://code.jquery./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>

Update: as per updated requirements.
This fiddle uses only JavaScript. It will display a div for 5 seconds and then hide it and display another div. http://jsfiddle/xZEvb/

Here is the plete code

<!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>

You can do it like this with plain javascript and HTML since you didn't ask for a solution using any frameworks like jQuery or 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);
}

The time value is a number of milliseconds that you want the message to display for. The text can be any HTML. The message will display in the place that you put the message HTML in your page.

Sample implementation: http://jsfiddle/jfriend00/ePxLB/

You can do this without Javascript using CSS3 animation and @keyframes. position: absolute; will prevent the splash from affecting any layout and the height: 0 animation gets it out of the way when finished.

Demo: http://jsfiddle/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>

本文标签: javascriptHTML Text with Time LimitStack Overflow