阿舍想要的功能很簡單,就是每次訪客進來的時候,可以隨機的跳不同的廣告出來,不需要用到 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 個技法
沒有留言 :
張貼留言