Wenzi

javascript实现一个简单的广告位

蚊子前端博客
发布于 2015/01/31 07:00
一般广告位的实现都是一个独立的模块,哪里需要添加广告位,就把这个广告位插在哪里;而这个广告位通常都是由一个js链接导入的

一般广告位的实现都是一个独立的模块,哪里需要添加广告位,就把这个广告位插在哪里;而这个广告位通常都是由一个 js 链接导入的。

在这段广告位的 js 代码里,主要的功能点有:

  1. 代码采用闭包的方式,防止变量污染全局;
  2. 采用可配置项的方式进行调用:可以配置广告展示的开始时间、结束时间、广告位的宽和高;
jumeiForU.init({
    start: '2015/02/01 00:00',
    end: '2016/01/01 00:00',
    width: 400,
    height: 400,
});
  1. 每次刷新页面均采用随机数的方式进行广告的展示;如果想要进行顺序循环展示的话,那就得读写 cookie 了;
  2. 读取引用该 js 链接中所带的参数,比如下面的广告链接,我们能够获取到 referer 参数的值。关于这个功能的实现,可以参考我的上篇文章【javascript 获取 URL 链接和 js 链接中的参数】:
<script type="text/javascript" src="http://xxx.js?referer=wenzi"></script>

以下放出代码,大家可进行参考,欢迎批评建议:

(function () {
  var jumeiForU = {
    // 初始化
    init: function (_config) {
        this.config = this.extend(this.config, _config);
        this.show();
    },
    // 广告展示及跳转链接
    data: [
      {
          title: '九朵云祛斑霜',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p854446t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p854446t1.html?referer=',
      },
      {
          title: 'Guerisson奇迹马油24K金面膜贴',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1293256t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p1293256t1.html?referer=',
      },
      {
          title: 'Its-skin晶钻蜗牛面膜',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p818496t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p818636t1.html?referer=',
      },
      {
          title: '九朵云美白祛斑气垫BB霜',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1293254t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p1293254t1.html?referer=',
      },
      {
          title: '可莱丝NMF水库针剂睡眠面膜5片',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1312153t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p1312153t1.html?referer=',
      },
      {
          title: '猪皮面膜',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1254465t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p1254465t1.html?referer=',
      },
      {
          title: '奇迹马油精华套装',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1293257t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p1293257t1.html?referer=',
      },
      {
          title: '九朵云美白祛斑套组',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1293255t1.jpg',
          url:
              'http://www.jumeiglobal.com/deal/ht150122p1293255t1.html?referer=',
      },
      {
          title: '晶钻蜗牛修护睡眠面膜',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p818636t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p818496t1.html?referer=',
      },
      {
          title: 'skin1004僵尸面膜',
          img: 'http://p0.jmstatic.com/g/300x250/ht150122p1265333t1.jpg',
          url: 'http://www.jumeiglobal.com/deal/ht150122p1265333t1.html?referer=',
      },
    ],
    // 配置
    config: {
        start: '2015/01/01 00:00',
        end: '2030/01/01 00:00',
        width: 300,
        height: 250,
    },
    // 广告展示
    show: function () {
      var nowtime = new Date().getTime(),
        starttime = new Date(this.config.start).getTime(),
        endtime = new Date(this.config.end).getTime(),
        random = this.getRandom(),
        referer = this.getCurrentScript('referer');
      if (nowtime >= starttime && nowtime < endtime) {
        document.write(
            '<div style="position:relative; padding:0; margin:0; width:' +
                this.config.width +
                'px; height:' +
                this.config.height +
                'px"><a href="' +
                this.data[random].url +
                referer +
                '" target="_blank"><img src="' +
                this.data[random].img +
                '" alt="" style="width:' +
                this.config.width +
                'px; height:' +
                this.config.height +
                'px; border:0;" /></a></div>'
          );
      }
    },
    // 返回当前需要展示的广告代号
    getRandom: function () {
        return Math.floor(Math.random() * this.data.length);
    },
    extend: function (destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    },
    // 获取referer的值
    getCurrentScript: function (name) {
        var i = 0,
            result = null,
            script,
            scripts,
            url,
            reg,
            r;

        // firefox支持currentScript属性
        if (document.currentScript) {
            script = document.currentScript;
        } else {
            // 正常情况下,在页面加载时,当前js文件的script标签始终是最后一个
            scripts = document.getElementsByTagName('script');
            script = scripts[scripts.length - 1];
        }
        url = script.hasAttribute
            ? script.src
            : script.getAttribute('src', 4);
        reg = new RegExp('(^|&|\\?)' + name + '=([^&]*)(&|$)', 'i');
        r = url.substr(1).match(reg);
        if (r !== null && r !== '') {
            result = decodeURIComponent(r[2]);
        }
        return result === '' ? null : result;
    },
  };
  jumeiForU.init();
})(window);
阅读(1316)
Simple Empty
No data