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>

　　我们可以通过 JS 来对广告进行重新排序. 参考代码如下:

复制代码代码如下:

　　</div>

　　</div>

　　//<![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 那样的扩展需求, 将空广告位显示在最后, 且显示广告招租链接, 该如何处理? 这个当作课后习题吧...

教程首页更多教程