阿舍想要的功能很簡單，就是每次訪客進來的時候，可以隨機的跳不同的廣告出來，不需要用到 Server 端的程式和資料庫的，所以，只要用到 Javascript 應該就可以寫出來的，阿舍個人比較喜歡用 dojo，然後，沒有學過 jQuery，因此，就用 dojo 弄出下面的程式碼來，不過，這個程式不用 dojo 也是寫的出來的，只是...阿舍比較懶哩 ! ^^
<script type="text/javascript">
//<![CDATA[
var ad1 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
var ad2 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
var ad3 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
dojo.addOnLoad(function() {
var adNum = 3 ;
var adDiv = “rotatorAD”;
var ad = "ad" + Math.floor(Math.random()*(adNum-1+1)+1);
dojo.byId(adDiv).innerHTML = eval( ad ) ;
});
//]]>
</script>
阿舍的這個程式的作法是先把要顯示的廣告的網址依序指定給 ad1、ad2、ad3 等變數，然後，再用亂數(這個亂數的取法是參考自「低溫烘培」的這篇文的) 來取出 1~3 之間的一個數字來和 "ad” 字串組出要顯示的變數名稱，然後，再透過 dojo 取到要放廣告的 DIV，再經由「innerHTML」塞廣告的 HTML 碼。
如果你有需要用的話，首先要依序定出 ad 變數來放你所有的廣告程式碼 ( 設定之前，要先把廣告程式碼的 " 轉換成 ' )，然後，把 adNum 設成你的 ad 變數的數量，以阿舍有 ad1 ~ ad3 共三個，所以，adNum 就指定為 3，接著，再把 adDiv 設成你要放廣告的那個 Div 的 id 名稱，以阿舍的 Div 的 id 為 "rotatorAD” 例， adDvi 就指定為 “rotatorAD”，都指定完成之後，就把這段程式碼放到網頁裡的 <head> 和 </head> 之間。
如果你從來都沒有用過 dojo，那麼你就需要在<head> 和 </head> 之間，多加入下面這一行，另外，如果不是和阿舍一樣是用 Blogger 的服務的話，上面程式碼中的「//<![CDATA[」 和 「//]>」就可以移除，這個是專門給 Blogger 的範本用的哩 ! 如果要看範例，右邊這個大條的廣告就是用這個程式碼弄出來的哩 ! 每次更新網頁，應該是都會不一樣的吧 !
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
完整的網頁程式碼如下：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var ad1 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
var ad2 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
var ad3 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
dojo.addOnLoad(function() {
var adNum = 3;
var adDiv = "rotatorAD";
dojo.require("dojox.math");
var ad = "ad" + Math.floor(Math.random()*(adNum-1+1)+1);
dojo.byId(adDiv).innerHTML = eval( ad ) ;
});
//]]>
</script>
</head>
<body>
<div id="rotatorAD"></div>
</body>
</html>
問題還是沒解決嗎 ?? 這裡有更多的 Ubuntu 相關教學可以參考哩 ...
買本阿舍寫的電子書帶走 - Ubuntu 指令新手馬上會用到的 35 個技法
沒有留言 :
張貼留言