javascript实现一个简单的广告位

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

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

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

  1. 代码采用闭包的方式,防止变量污染全局;

  2. 采用可配置项的方式进行调用:可以配置广告展示的开始时间、结束时间、广告位的宽和高;

COPYJAVASCRIPT

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 链接中的参数】:

COPYHTML

<script type="text/javascript" src="http://xxx.js?referer=wenzi"></script>

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

COPYJAVASCRIPT

(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);
阅读(772)

公众号:

qrcode

微信公众号:前端小茶馆

相关文章

公众号:

qrcode

微信公众号:前端小茶馆