快捷導(dǎo)航

php 隨機(jī)排序廣告的實(shí)現(xiàn)代碼

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

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

投放廣告的人都很關(guān)注他的廣告會(huì)放在哪個(gè)位置, 因?yàn)檫@可能影響點(diǎn)擊次數(shù), 甚至是否在第一屏顯示. 就這個(gè)問(wèn)題, 其實(shí)很容易解決, 只要隨機(jī)顯示廣告即可.

代碼如何實(shí)現(xiàn)? 在這我推薦兩種隨機(jī)顯示廣告的處理辦法.

在后端處理
在后端排序好再輸出頁(yè)面. 將廣告節(jié)點(diǎn)用數(shù)組存放, 對(duì)數(shù)組進(jìn)行隨機(jī)排序, 再輸出經(jīng)過(guò)排序的數(shù)組. 參考代碼 (PHP) 如下:

復(fù)制代碼代碼如下:

 
// 用數(shù)組存放廣告列表 
$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>' 
); 

// 對(duì)數(shù)組進(jìn)行隨機(jī)排序 
shuffle($ads); 

// 輸出經(jīng)過(guò)排序的數(shù)組 
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 
echo $html; 

我們來(lái)擴(kuò)展一下, 如果我是站長(zhǎng), 預(yù)留了 4 個(gè)廣告位, 但現(xiàn)在只有 3 個(gè)在投放; 我想在空置的廣告位放置一個(gè) "虛位以待" 的廣告招租鏈接, 并顯示在最后, 該如何處理呢? 在排序完成之后再插放廣告招租鏈接就可以了.

復(fù)制代碼代碼如下:

 
// 用數(shù)組存放廣告列表 
$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>' 
); 

// 對(duì)數(shù)組進(jìn)行隨機(jī)排序 
shuffle($ads); 

// 輸出經(jīng)過(guò)排序的數(shù)組 
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 

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

我就是用這個(gè)方法來(lái)輸出 125x125 廣告的, 因?yàn)樗庇^(guān)可靠, 處理方便. 但是如果你希望對(duì)頁(yè)面做靜態(tài)化, 建議選用 JS 隨機(jī)排序的方法.

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

復(fù)制代碼代碼如下:

 
<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> 

我們可以通過(guò) JS 來(lái)對(duì)廣告進(jìn)行重新排序. 參考代碼如下:

復(fù)制代碼代碼如下:

 
<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'); 

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

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

// 將老的廣告區(qū)的節(jié)點(diǎn)隨機(jī)插放到新的廣告區(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> 