JavaScript 实现静态页面随机显示广告列表

作者:函数茶馆

时间:2026-10-25

浏览:502

本文介绍如何在JavaScript中通过生成不重复随机数来随机展示预设的HTML广告代码。核心思路是利用Math.random对数组进行伪随机排序,提取索引后按序输出对应的HTML片段,适用于无需后端交互的静态页面广告位随机显示场景。

文章目录

生成不重复随机数

首先,需要实现生成指定数量范围内且不重复的随机数,并将这些随机数存入另一个数组中。可以通过以下方法完成这一过程:


代码如下:

 
function getRandomNumbers(count)
{ 
var numbers = new Array();
var original = new Array();
for (var i=0;i<count;i++)
{ 
original[i] = i+1;
} 
original.sort(function(){ return 0.5 - Math.random(); });
for (var i=0;i<count;i++)
{ 
numbers[i] = original[i] - 1;
} 
return numbers;
} 

随机显示HTML广告脚本

接着,在后台程序中输出HTML脚本内容:


代码如下:

 
var sf = new Array();
sf[0]='<tr><TD width=120><a href=# target=_blank>服务器名称</a></TD><TD width=110><a href=http://sc.jb51.net target=_blank>服务器IP</a></TD><TD width=160>开区时间</TD><TD align=center width=95>线路类别</TD><TD>版本介绍</TD><TD width=105>客服QQ</TD><TD align=center width=55><a href=# target=_blank><font color=#000000>详细介绍</font></a></TD></tr>';
sf[1]='<tr><TD width=120><a href=# target=_blank>服务器名称</a></TD><TD width=110><a href=http://s.jb51.net target=_blank>服务器IP</a></TD><TD width=160>开区时间</TD><TD align=center width=95>线路类别</TD><TD>版本介绍</TD><TD width=105>客服QQ</TD><TD align=center width=55><a href=# target=_blank><font color=#000000>详细介绍</font></a></TD></tr>';

利用上述方法生成随机数,并根据生成的随机数顺序将对应的HTML脚本显示出来。


代码如下:

 
var numbers = getRandomNumbers(sf.length);
for( i=0;i<numbers.length;i++ )
{ 
document.write(sf[numbers[i]]);
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章