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

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

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

在後端處理
在後端排序好再輸出頁面. 將廣告節點用數組存放, 對數組進行隨機排序, 再輸出經過排序的數組. 參考代碼 (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 廣告的, 因為它直觀可靠, 處理方便. 但是如果你希望對頁面做靜態化, 建議選用 JS 隨機排序的方法.

在前端處理
在後端按原有循序輸出, 在頁面通過 JavaScript 重新排序. 假設頁面輸出廣告地區的 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;
}

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

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

//]]>
</script>

如果有如同方法 1 那樣的擴充需求, 將空廣告位顯示在最後, 且顯示廣告招租連結, 該如何處理? 這個當作課後習題吧...