#精品

利用JavaScript实现广告随机展示的教程

最近笔者接到几位网友的提问，询问采用何种广告管理系统以实现多个广告在同一广告位中随机展示的问题。其实813站长大咖并未采用任何广告管理系统，小型网站完全可以不用广告管理系统，尽量追求轻量。本文介绍利用JavaScript实现多个广告随机展示的教程。

如果是采用WordPress建站，且广告较多的网站，推荐：Ad Inserter Pro插件。

JavaScript实现随机广告

本方法示例为有广告A和广告B，用户访问页面的时候，随机展示其中一个广告。

创建广告位

<div id="ads"></div>

将以上代码放置到需要展示广告的HTML代码中。

JavaScript代码部分

以下代码可以放置到需要展示广告页面的HTML代码尾部，</body>之前。

<script> var ad_html = "广告A代码"; 
         var ad_n = Math.floor(Math.random() * 2); 
         if (0 < ad_n){ ad_html="广告B代码"; 
         } 
         document.getElementById("ads").innerHTML = ad_html; 
</script>

如果有广告A、广告B和广告C，三段代码，只需修改成以下这样：

<script> var ad_html = "广告A代码"; 
         var ad_n = Math.floor(Math.random() * 3); 
         if (1 < ad_n){ 
                 ad_html="广告B代码"; 
         } 
         if (0 < ad_n){ 
         ad_html="广告C代码"; 
         } 
         document.getElementById("ads").innerHTML = ad_html; 
</script>

以上代码中Math.floor(Math.random() * 3)将生成0-2的随机整数，当随机数为0，则展示广告A；当随机数为1，则展示广告C；当随机数为2，则展示广告B。

不过要注意的是广告代码中如果有双引号 " 的话，需要添加转义符号 \ ，例如：

<img src="1.png" /> 

应该转换成： 

<img src=\"1.png\" />