php random sort of advertising code

The advertiser is very concerned about where his AD will be placed, because it may affect the number of clicks, or even whether it will be displayed on the first screen
How is the code implemented? Here I recommend two ways to handle random display ads

is processed on the back end Sort the AD nodes in an array, sort the array randomly, and then output the sorted array. The reference code (PHP) is as follows:

 
//  Use an array to hold a list of ads  
$ads = array('<a href="#"><img src="ad-125x125.png" alt=" advertising  1" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt=" advertising  2" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt=" advertising  3" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt=" advertising  4" width="125" height="125" /></a>' 
); 

//  Sort the array at random  
shuffle($ads); 

//  Output a sorted array  
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 
echo $html; 

Let's expand, if I was the webmaster, reserved 4 advertising space, but now only 3 in the release; I would like to place a "waiting for vacancy" link in the vacant AD space and display it at the end. What should I do? After sorting is done, just insert the link to the AD for rent.

 
//  Use an array to hold a list of ads  
$ads = array('<a href="#"><img src="ad-125x125.png" alt=" advertising  1" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt=" advertising  2" width="125" height="125" /></a>' 
,'<a href="#"><img src="ad-125x125.png" alt=" advertising  3" width="125" height="125" /></a>' 
); 

//  Sort the array at random  
shuffle($ads); 

//  Output a sorted array  
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 

//  Add links to ads for rent  
$html .= '<a href="#"><img src="sell-ad-125x125.png" alt=" Leave a seat vacant " width="125" height="125" /></a>'; 
echo $html; 

This is the way I output 125x125 ads, because it is intuitive, reliable, and easy to handle

is processed in the front end Reorder the page by JavaScript. Suppose the page outputs the HTML fragment of the AD area as follows.

 
<div id="ads"> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  1" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  2" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  3" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  4" width="125" height="125" /></a> 
</div> 

We can reorder the ads by JS. The reference code is

 
<div id="ads" style="display:none;"> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  1" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  2" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  3" width="125" height="125" /></a> 
<a href="#"><img src="ad-125x125.png" alt=" advertising  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'); 

//  The subscript arrays  
var arr = new Array(); 
for(var i=0; i<ads.length; i++) { 
arr[i] = i; 
} 

//  Random sequence  
function randomSort(a, b){ 
var tmp = parseInt((Math.random() + 0.5), 10); 
return tmp ? a-b : b-a; 
} 

//  Insert the nodes of the old AD area into the new AD area at random  
arr.sort(randomSort); 
for(var i=0; i<arr.length; i++) { 
target.appendChild(ads[arr[i]].cloneNode(true)); 
} 

//  Displays new AD areas and removes old ones  
source.parentNode.removeChild(source); 
target.style.display = 'block'; 

//]]> 
</script> 

What if there is an extension requirement like method 1, showing the empty AD space at the end and showing the AD rental link? Let's take this as an exercise...