JavaScript實現自動重新整理頁面

javascript|重新整理|頁面

　　今天訪問了矽谷動力網路學院，發現其中下部有一行圖片經過指定時間變化一次，實現圖片文章的顯示，覺得效果不錯，開啟查看了一下原始碼，發現其使用的是重新整理的功能，在這裡給大家說說。具體代碼為：

<table width="748" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
    <td height=95 background="ab28-1.gif" width="23" > </td>
    <td  height=95  align="center" background="ab28-2.gif">
<a href="http://www.enet.com.cn/eschool/inforcenter/A20040410301390.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/main1.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20040819335401.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/baishi.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/edu/inforcenter/A20041015352615.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/5jianwanfu.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20041009350269.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/PHOTOSHOPtianse.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20050415408861.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/54764567.gif" vspace=8 border=0 class=border_img></a>     </td>
    <td  height=95  background="ab28-3.gif" width="16"></td>
  </tr>
</table>
<script>setTimeout("location.href='rdztt2.html'",10000);</script>

　　把上面的代碼儲存為一個檔案為rdztt1.html，然後我們再建立了一個檔案rdztt2.html，內容如下：

<table width="748" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
    <td height=95 background="ab28-1.gif" width="23" > </td>
    <td  height=95  align="center" background="ab28-2.gif">
<a href="http://www.enet.com.cn/eschool/inforcenter/A20040825337317.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/yingpan.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20041109360306.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/9mmnbvc.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/zhuanti/iis/" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/iisserver.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/edu/inforcenter/A20040811332742.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/nianxin.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20040816334318.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/psxuejing.gif" vspace=8 border=0 class=border_img></a>     </td>
    <td  height=95  background="ab28-3.gif" width="16"></td>
  </tr>
</table>
<script>setTimeout("location.href='rdztt3.html'",10000);</script>

　　然後又建立了一個rdztt3.html，內容如下：

<table width="748" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
    <td height=95 background="ab28-1.gif" width="23" > </td>
    <td  height=95  align="center" background="ab28-2.gif">
<a href="http://www.enet.com.cn/eschool/zhuanti/fireworks/" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/fireworkview.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20041022355087.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/6uryeyu.gif" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20050118383106.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/tuijianjingmei5.jpg" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20050119383530.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/xiugaiwinxpzhi7.jpg" vspace=8 border=0 class=border_img></a>          <a href="http://www.enet.com.cn/eschool/inforcenter/A20050119383752.html" target="_blank"><img src="http://www.webjx.com/eschool/images/v2/jinchdenggua8.jpg" vspace=8 border=0 class=border_img></a>     </td>
    <td  height=95  background="ab28-3.gif" width="16"></td>
  </tr>
</table>
<script>setTimeout("location.href='rdztt1.html'",10000);</script>

　　大家可以注意到上面三個檔案中均有如下代碼：

<script>setTimeout("location.href='*****.html'",10000);</script>

這就是實現自動重新整理的代碼，使用了setTimeout()函數設定為每隔１０秒鐘重新整理一次！最後使用iframe標籤加到首頁中：

<iframe name="titleframe" src='/eschool/includes/gdtup/tu5/rdztt1.html' noresize="Yes"  scrolling="No" frameborder="0" marginheight="0" marginwidth="0" width=750 height=100></iframe>

具體示範效果大家可以看看

http://www.enet.com.cn/eschool/中下部變化的圖片

http://www.enet.com.cn/eschool/includes/gdtup/tu5/rdztt1.html實際顯示的頁面