频道导航

php 随机排序广告的实现代码

2018-12-30 PHP 前端之家

前端之家收集整理的这篇文章主要介绍了php 随机排序广告的实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

投放广告的人都很关注他的广告会放在哪个位置,因为这可能影响点击次数,甚至是否在第一屏显示. 就这个问题,其实很容易解决,只要随机显示广告即可. 代码如何实现? 在这我推荐两种随机显示广告的处理办法. 在后端处理
在后端排序好再输出页面. 将广告节点用数组存放,对数组进行随机排序,再输出经过排序的数组. 参考代码 (PHP) 如下:
<div class="codetitle"><a style="CURSOR: pointer" data="21752" class="copybut" id="copybut21752" onclick="doCopy('code21752')"> 代码如下:

<div class="codebody" id="code21752">
// 用数组存放广告列表
$ads = array('<a href="#"> 广告 1

'
,'<a href="#"> 广告 2

'
,'<a href="#"> 广告 3

'
,'<a href="#"> 广告 4

'
); // 对数组进行随机排序
shuffle($ads); // 输出经过排序的数组
$html = '';
foreach ($ads as $ad) {
$html .= $ad;
}
echo $html;

我们来扩展一下,如果我是站长,预留了 4 个广告位,但现在只有 3 个在投放; 我想在空置的广告位放置一个 "虚位以待" 的广告招租链接,并显示在最后,该如何处理呢? 在排序完成之后再插放广告招租链接就可以了.
<div class="codetitle"><a style="CURSOR: pointer" data="13466" class="copybut" id="copybut13466" onclick="doCopy('code13466')"> 代码如下:

<div class="codebody" id="code13466">
// 用数组存放广告列表
$ads = array('<a href="#"> 广告 1

'
,'<a href="#"> 广告 3

'
); // 对数组进行随机排序
shuffle($ads); // 输出经过排序的数组
$html = '';
foreach ($ads as $ad) {
$html .= $ad;
} // 添加广告招租链接
$html .= '<a href="#"> 虚位以待

';
echo $html;

我就是用这个方法来输出 125x125 广告的,因为它直观可靠,处理方便. 但是如果你希望对页面做静态化,建议选用 JS 随机排序的方法. 在前端处理
在后端按原有循序输出,在页面通过 JavaScript 重新排序. 假设页面输出广告区域的 HTML 片段如下.
<div class="codetitle"><a style="CURSOR: pointer" data="91440" class="copybut" id="copybut91440" onclick="doCopy('code91440')"> 代码如下:

<div class="codebody" id="code91440">
<div id="ads">
<a href="#"> 广告 1

<a href="#"> 广告 2

<a href="#"> 广告 3

<a href="#"> 广告 4

我们可以通过 JS 来对广告进行重新排序. 参考代码如下:
<div class="codetitle"><a style="CURSOR: pointer" data="30961" class="copybut" id="copybut30961" onclick="doCopy('code30961')"> 代码如下:<div class="codebody" id="code30961">
<div id="ads" style="display:none;">
<a href="#"> 广告 1

<a href="#"> 广告 2

<a href="#"> 广告 3

<a href="#"> 广告 4

<div id="random-ads" style="display:none;">
<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'; //]]>

如果有如同方法 1 那样的扩展需求,将空广告位显示在最后,且显示广告招租链接,该如何处理? 这个当作课后习题吧...

广告广告广告随机排序