起初只是為了好玩,希望能使 Users Online Counter - Remote Script 這個線上人數的服務能夠"隨機顯示圖片"而寫的JavaScript小程式,寫完後覺得自己的語法不夠"漂亮",看到 男丁格爾s 脫殼 中也有提供相關的語法,而且語法頗為"漂亮",如此一來只需要套用即可(自己白忙一場)...如果你也有申請 Users Online Counter - Remote Script 這個線上人數的服務,且跟我一樣"無聊"想隨機顯示6張不同顏色圖片的話請直接套用以下語法:
<table width="76" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="39"><script type="text/javascript">
//宣告圖片陣列
var myImg = new Array("users-online1.gif","users-online2.gif","users-online3.gif","users-online4.gif","users-online5.gif","users-online6.gif");
//乘以陣列的長度以取得從0~(陣列長度-1)的數字
var imgIndex = Math.floor(Math.random()*myImg.length);
document.write('<a href="http://www.twospots.com/free-users-online-counter/" target="_blank"><img src="http://www.tscounter.com/images/users-online/'+myImg[imgIndex]+'" width="39" height="21" border="0" alt="Number of online users in last 3 minutes"></a>');
</script></td>
<td width="37"><script type="text/javascript">document.write('<a href="http://www.twospots.com/free-users-online-counter/" target="_blank"><img src="http://www.tscounter.com/uow3c/?id=你的帳號" width="37" height="21" border="0" alt="Number of online users in last 3 minutes"></a>');</script><noscript>
<a href="http://www.twospots.com/web-services/web-design/" style="style: none;" target="_blank"><img src="http://www.tscounter.com/uow3c/?id=你的帳號" width="37" height="21" border="0" alt="website design"></a></noscript></td>
</tr></table>
<td width="39"><script type="text/javascript">
//宣告圖片陣列
var myImg = new Array("users-online1.gif","users-online2.gif","users-online3.gif","users-online4.gif","users-online5.gif","users-online6.gif");
//乘以陣列的長度以取得從0~(陣列長度-1)的數字
var imgIndex = Math.floor(Math.random()*myImg.length);
document.write('<a href="http://www.twospots.com/free-users-online-counter/" target="_blank"><img src="http://www.tscounter.com/images/users-online/'+myImg[imgIndex]+'" width="39" height="21" border="0" alt="Number of online users in last 3 minutes"></a>');
</script></td>
<td width="37"><script type="text/javascript">document.write('<a href="http://www.twospots.com/free-users-online-counter/" target="_blank"><img src="http://www.tscounter.com/uow3c/?id=你的帳號" width="37" height="21" border="0" alt="Number of online users in last 3 minutes"></a>');</script><noscript>
<a href="http://www.twospots.com/web-services/web-design/" style="style: none;" target="_blank"><img src="http://www.tscounter.com/uow3c/?id=你的帳號" width="37" height="21" border="0" alt="website design"></a></noscript></td>
</tr></table>
其實這個小程式的結構算滿是簡單的,可以輕易套用!我另外也"雞婆"把 垃圾信防治協會 的"貼紙投稿圖片"以這個程式做成了隨機顯示的JS檔案,有興趣的可以"自行複製"加在自己的Blog上,語法如下:
<script src="http://hk.geocities.com/tony1861/No_JunkMail.js" type="text/javascript" charset="utf-8"></script>
是否有隨機顯示的效果了呢?大家一起來試看看吧!
延伸閱讀:Technorati Tags: JavaScript, 教學
相關連結:
0 意見:
張貼留言