php 隨機排序廣告的實現代碼

更新時間：2011年05月09日 19:37:07 作者：

博客流行在側邊欄放置 4 到 6 個 125x125 的廣告, 但一般的擺放順序存在問題. 如果廣告位置被固定, 各個位置的天然關注度肯定是不一樣的

投放廣告的人都很關注他的廣告會放在哪個位置, 因為這可能影響點擊次數, 甚至是否在第一屏顯示. 就這個問題, 其實很容易解決, 只要隨機顯示廣告即可.

代碼如何實現? 在這我推薦兩種隨機顯示廣告的處理辦法.

在后端處理
在后端排序好再輸出頁面. 將廣告節(jié)點用數組存放, 對數組進行隨機排序, 再輸出經過排序的數組. 參考代碼 (PHP) 如下:

復制代碼代碼如下:

 
// 用數組存放廣告列表 
$ads = array('<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt="廣告 4" width="125" height="125" /></a>' 
); 

// 對數組進行隨機排序 
shuffle($ads); 

// 輸出經過排序的數組 
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 
echo $html; 

我們來擴展一下, 如果我是站長, 預留了 4 個廣告位, 但現在只有 3 個在投放; 我想在空置的廣告位放置一個 "虛位以待" 的廣告招租鏈接, 并顯示在最后, 該如何處理呢? 在排序完成之后再插放廣告招租鏈接就可以了.

復制代碼代碼如下:

 
// 用數組存放廣告列表 
$ads = array('<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a>' 
); 

// 對數組進行隨機排序 
shuffle($ads); 

// 輸出經過排序的數組 
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 

// 添加廣告招租鏈接 
$html .= '<a href="#"><img src="sell-ad-125x125.png" alt="虛位以待" width="125" height="125" /></a>'; 
echo $html; 

我就是用這個方法來輸出 125x125 廣告的, 因為它直觀可靠, 處理方便. 但是如果你希望對頁面做靜態(tài)化, 建議選用 JS 隨機排序的方法.

在前端處理
在后端按原有循序輸出, 在頁面通過 JavaScript 重新排序. 假設頁面輸出廣告區(qū)域的 HTML 片段如下.

復制代碼代碼如下:

 
<div id="ads"> 
<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt="廣告 4" width="125" height="125" /></a> 
</div> 

我們可以通過 JS 來對廣告進行重新排序. 參考代碼如下:

復制代碼代碼如下:

 
<div id="ads" style="display:none;"> 
<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt="廣告 4" width="125" height="125" /></a> 
</div> 
<div id="random-ads" style="display:none;"> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 

var source = document.getElementById('ads'); 
var target = document.getElementById('random-ads'); 
var ads = source.getElementsByTagName('a'); 

// 下標數組 
var arr = new Array(); 
for(var i=0; i<ads.length; i++) { 
arr[i] = i; 
} 

// 隨機排序 
function randomSort(a, b){ 
var tmp = parseInt((Math.random() + 0.5), 10); 
return tmp ? a-b : b-a; 
} 

// 將老的廣告區(qū)的節(jié)點隨機插放到新的廣告區(qū) 
arr.sort(randomSort); 
for(var i=0; i<arr.length; i++) { 
target.appendChild(ads[arr[i]].cloneNode(true)); 
} 

// 顯示新的廣告區(qū)和移除老的廣告區(qū) 
source.parentNode.removeChild(source); 
target.style.display = 'block'; 

//]]> 
</script> 