|
|
代碼如何實現? 在這我推薦兩種隨機顯示廣告的處理辦法.
在后端處理
在后端排序好再輸出頁面. 將廣告節(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>
如果有如同方法 1 那樣的擴展需求, 將空廣告位顯示在最后, 且顯示廣告招租鏈接, 該如何處理? 這個當作課后習題吧...
php技術：php 隨機排序廣告的實現代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
