双11.11抢红包广告浮窗代码,支持COOKIE限制展现次数

aowana 发布于 2018-10-22 22:55     分类:站长学院     来源:爱玩电脑     阅读(193)    

马老板一年一度的双11.11抢红包活动又开始了,今年大家可以瓜分23亿红包~ 今年我也决定推广一把看能不能搞几个蛋子补贴一下。网络上搜索双11.11红包广告代码并没有合适的,只能自己动手写一个水平有限不介意的同学继续往下看。

11.11红包

首先,在需要显示双11.11红包广告的页面加一个固定位置容器,然后写上 CSS代码把它设置为静态位置。通过COOKIE判断当前用户已展现过广告,如果没有就显示抢红包的浮窗广告并将COOKIE设置为已显示,注意需要将COOKIE有效时间设置为12小时以便第二天继续展现广告。

一开始准备直接HTML+CSS+JS搞定,无奈本人不会JS无法操作COOKIE只能退而求其次使用PHP服务端判断和操作COOKIE,下面一起来看看代码和广告效果。

双11.11抢红包效果图

图片站上的效果点浮窗里的广告图片即可打开推广链接,虽然比较粗糙但效果还是挺不错的,我设置的每4个小时展现一次下面来看如何使用代码实现。

一、广告展现页模板加入CSS样式和JS ajax代码,例如展现页模板名 show.html 先看看CSS部分代码。

<style type="text/css">
.fcads{
display:none; width: 420px; position: fixed; top: 100px; left: 50%;
margin-left: -210px; background: #fff; border: 15px solid #ddd;
border-radius: 10px; text-align: center
}
.fcads h4 { font-size: 16px; margin: 0; padding: 8px 0}
.fcads img { width: 100%; height: auto }
.fcads p { padding: 10px 0 15px 0 }
</style>
因为是临时广告就直接写在了 show.html 文件中等活动结束就去掉却可,我们还需要在 show.html 加入部分JS代码实现 AJAX 请求至 s11.php 。

一、 jQuery 实现 ajax 请求

$( document ).ready(function(){
	// 11.11
	$.post('/plus/v2/s11.php', {tid : 188}, function(data){
		$('#content').append(data);
		$('.fcads').hide().show();
	})
)}
代码很简单就是页面加载完成后请求至 /plus/v2/s11.php ,获取到内容后追加至 #content 容器中其实就是追加浮窗代码。

二、javascript 实现 ajax 请求

xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
	if ( xhr.readyState === 4 )
	{
		if ( xhr.status === 200 ) {
			if ( xhr.responseText != '' ) {
				document.getElementById('content').innerHTML += xhr.responseText;
				document.getElementById('fcads').style.display='block';
			}
		}
	}
}
xhr.open('GET', '/plus/v2/s11.php?uid=110&sid='+Math.random(), true);
xhr.send();

原生javascript实现ajax请求代码要麻烦一点,功能和效果与上面的jQuery部分一样。

CSS和JS部分完成了,我们再看看 s11.php 部分的代码,其它也很简单都是基础的编程知识主要就是COOKIE判断和ECHO输出。

if ( NOW_HOST == 'www.aowana.com' )
{
	$url = 'https://s.click.taobao.com/dTPTBLw';
	$img = SKIN_DIR . '/temp/11112.jpg';
}
else
{
	$url = 'https://s.click.taobao.com/vjJTBLw';
	$img = SKIN_DIR . '/temp/1111.jpg';
}

$html = '<div class="fcads" id="fcads">
<h4>马云双<strong>11.11</strong>红包 快来瓜分23亿</h4>
<a href="'.$url.'" target="_blank"><img src="'.$img.'"></a>
<p><button type="button" onclick="document.getElementById(\'fcads\').style.display=\'none\'">关闭窗口</button></p>
</div>';

$c_key = 's11hb';
$is_show = get_cookie( $c_key );

if ( !$is_show )
{
	set_cookie( $c_key, time(), 7200 );
	echo $html;
}

# end
exit('');
因为双11.11红包活动的无线端与PC端推广链接不一样,所以在 s11.php 里加了个判断方便显示在不同平台。

代码写得比较渣大家不要见怪主要看看实现的思路,优点是简单易操作适合像我一样的菜鸟,缺点是代码乱而且多了个 /plus/v2/s11.php 的请求增加服务器压力。

好了,记录一下。有需要的朋友直接拿去用吧,有问题可以联系我乐意帮助。

标签Tags:PHP互联网

本站内容未经允许欢迎转载但必须保留原出处链接,部分内容来源互联网版权归原作者所有。

赞 (1) 打赏
上一篇:mysql max_allowed_packet 导入数据时报错解决办法 下一篇:#站长日记# 记录如何解决网站出现大量404死链的问题

推荐阅读

网友评论

头像
推荐

欢迎访问爱玩电脑网

分享最实用的电脑知识和应用技巧,关注IT行业资讯、学装机、玩硬件还有各种搞机新姿势~

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏
二维码A
微信扫一扫打赏
二维码B