使用 JavaScript 创建动态横幅

周农健

3.20/5 (6投票s)

2000年10月20日

142641

这篇文章展示了如何使用 JavaScript 动态显示横幅，非常有用！

这是一个使用 JavaScript 动态显示横幅的示例。

这种方法包含两个部分

编写如下 meta 标签
```
<meta http-equiv="refresh" content="10">
```
这意味着页面将每 10 秒刷新一次。您可以将值“10”更改为任何数字。

2. 使用 getSeconds() 方法

在 JavaScript 中，秒数设置为 0 - 59。您可以根据需要将其划分为不同的部分。在这个示例中，我们将秒数划分为 6 个部分

我们应用 document.write 来写入一个横幅

     if ((ss>=30)&&(ss<=39))
     document.write("<img src='BanC1line.gif' border='0'>")

总共我们写入 6 个横幅，每个横幅在单分钟内的不同时间段显示，并将横幅链接到不同的 URL，以便横幅每 10 秒自动更改。当客户端点击横幅时，他们将被带到广告商的网站。

以下是源代码

     <html><head>
     <title>Dynamic Banners</title>
     <meta name="Author" content="Nongjian Zhou">
     <meta http-equiv="refresh" content="10">
     <style type="text/css">
     <!--
     a:active { color: #0000FF; text-decoration: none}
     a:hover { color: #CC0000; text-decoration: none}
     a:visited { text-decoration: none}
     a:link { text-decoration: none}
     -->
     </style>
     </head>
     <body bgcolor=#ffffff>
     <script language="JavaScript">
     var banTime= new Date()
     var ss=banTime.getSeconds()
     
     if ((ss>=0)&&(ss<=9))
        document.write(
         "<table width=550 height=70 bgcolor=#336699 cellspacing=2><tr><td 
     align=center bgcolor=#ffeeee><font color=#666680 size=7><i><a href='#'
         onClick=window.open('http://www.webcollege.bizland.com/jsPub/index.htm',
         '','width=500 height=400')>JavaScript For Beginners</a></i></font>
         </td></tr></table>")

     if ((ss>=10)&&(ss<=19))
         document.write(
         "<a href='#' onClick=window.open('http://internetcollege.virtualave.net',
         '','width=500 height=400')><img 
         src='http://www.webcollege.bizland.com/BanInternetc.gif' border='0'></a>")

     if ((ss>=20)&&(ss<=29))
         document.write(
         "<a href='#' onClick=window.open('http://www.ishopnomarkup.com',
         '','width=500 height=400')><img 
         src='http://www.webcollege.bizland.com/BanIshop.gif' border='0'></a>")

     if ((ss>=30)&&(ss<=39))
         document.write(
         "<img src='http://www.webcollege.bizland.com/BanC1line.gif' border='0'>")

     if ((ss>=40)&&(ss<=49))
        document.write(
         "<table width=550 height=70 bgcolor=#336699 cellspacing=2><tr><td 
         align=center bgcolor=#ffeeff><font color=#6666ff size=7><i><a 
         href='#' onClick=window.open('http://www.tongchiu.com','',
         'width=500 height=400')>Tong&chiu Web Design Inc.</a></i></font>
         </td></tr></table>")

     if ((ss>=50)&&(ss<=59))
         document.write(
         "<table width=550 height=70 bgcolor=#336699 cellspacing=2><tr><td 
         align=center bgcolor=#eeeeff><font color=#008000 size=7><i><a 
         href='#' onClick=window.open('http://members.xoom.com/chinainfoma',
         '','width=500 height=400')>A Guide To China</a></i></font>
         </td></tr></table>")
     </script>
     </body></html>

您可以更改该方法。例如，使用 GetHours() 在不同的小时显示不同的图像或文本文件。要了解更多关于 JavaScript 的信息，您可以访问 JavaScript 初学者教程。