JS代碼制作閃亮的表格邊框

2012/10/29 20:48:45作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS代碼制作閃亮的表格邊框

【實(shí)例描述】

可使用表格的樣式屬性“style”設(shè)置邊框的特性。本例通過JavaScript設(shè)置表格的邊框?qū)傩?，?shí)現(xiàn)邊框的閃亮效果。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（yzddtk.cn）</title>
</head>
<body>
<table border="0" width="280" id="tb1" style="border:3px solid green">
   <tr>
   <td>
     這是一個(gè)閃亮的表格邊框！
   </td>
   </tr>
   </table>
   <script language="JavaScript">
   function flashTable()
   {
   if (!document.all) return           
//判斷瀏覽器的類型
   if (tb1.style.borderColor=="green") 
//判斷表格的顏色是否是綠色
   tb1.style.borderColor="red"         
//將顏色更改為紅色
   else
   tb1.style.borderColor="green"       
//將顏色更改為綠色
   }
   setInterval("flashTable()", 400)    
//每隔400毫秒就更新下顏色
   </script> </body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是表格的“style”屬性，“green”表示將表格的顏色設(shè)置為綠色：本例使用一個(gè)定時(shí)器，每隔400毫秒調(diào)用一次‘‘flashTable”方法，此方法通過“borderColor”屬性不斷修改邊框的顏色，以實(shí)現(xiàn)閃亮效果。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：閃亮的表格邊框進(jìn)行本實(shí)例源碼下載

標(biāo)簽：表格 JS代碼