JavaScript實現自動重新整理頁面

來源:互聯網
上載者:User
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()函數設定為每隔10秒鐘重新整理一次!最後使用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實際顯示的頁面



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。