js+cookie控制弹窗每天只谈一次
本js效果是主要利用jquery来做的，里面有关于cookie的知识，如果不知道怎么设置请看"js设置cookie实例"。本着条条大路通罗马的原则，当然，你也可以用其它方法来设置cookie。
实现原理主要是判断cookie的值是否还存在。如果存在就不弹，反之弹出窗口。
下面来看一下js端的代码：
$(function(){
if(getCookie("qqtan")!="qqtan"){
setTimeout(alertqq,3000)
}
})
function alertqq(){
SetCookie("qqtan","qqtan",1);
var zj=Math.ceil((document.body.clientWidth/2)-(350/2))
var message=new Array();
message[0]="前端开发交流";
message[1]="前端开发爱好者";
message[2]="web前端开发技术交流";
message[3]="web前端开发博客推荐";
message[4]="web技术交流";
message[5]="web技术爱好";
message[6]="web技术开发交流";
message[7]="web前端开发技术交流";
message[8]="web前端开发博客推荐";
message[9]="web前端开发技术交流";
var sj=Math.random().toString().substr(2,1)
if($.browser.msie && $.browser.version == "6.0"){
$("#box_t").css("position","absolute")
}
var $a1=$("#box_t");
$("#box_t em").html(message[sj]);
var thegiht=$.browser.msie && $.browser.version == "6.0" ? document.documentElement.scrollTop + 260:260;
$a1.fadeIn("slow");
$a1.animate({
top:thegiht,
left:zj
},600);
fixed("#box_t",thegiht);
setTimeout(zd,3000)
$("#box_t .close").click(function(){
if($(this).html()=="关闭"){$("#box_t").fadeOut("slow");
}else{
zd();
}
})
}
function fixed($id, $top) {
$top = $top == "" ? 0 : $top;
if ($.browser.msie && $.browser.version == "6.0") {
$($id).css( {
"position" : "absolute"
});
$(window).scroll(function() {
if($("#box_t .close").html()=="关闭"){
var $kfh = document.documentElement.scrollTop + document.documentElement.offsetHeight-123;
$($id).css("top", $kfh)
}else{
var $kfh = document.documentElement.scrollTop + $top + "px";
$($id).css("top", $kfh)
}
})
} else {
$($id).css( {
"position" : "fixed"
})
}
}
function zd(){
$("#box_t .close").html("关闭")
$("#box_t").css({
"display":"none","top":"","left":"",
"right":"0px","bottom":"0px"})
$("#box_t").fadeIn("slow")
}
function SetCookie(name,value,Days)
{
//var Days=30; //此 cookie 将被保存 30 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name+"="+escape(value)+"; expires="+exp.toGMTString()+"; path=/";//path是cookie的访问路径
}
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
else
return null;
}这里可以细看一下
下面是html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script src="http://suiyidian.cn/texiao/jquery-1.3.1.js" language="javascript"></script>
<style type="text/css">
#box_t,#box_t *{ padding:0px; margin:0px; overflow:hidden}
#box_t{ position:fixed; width:350px; height:123px; border:1px dashed #ccc; background:#fff; display:none;z-index:9999;}
#box_t .box_title{ font-size:12px; color:#CCC;}
#box_t .box_title span{ font-size:14px; color:#555555; font-weight:bold}
#box_t .box_content{ width:330; height: auto; padding:10px}
#box_t .box_content p{ font-size:13px; color:#666666; line-height:18px}
#box_t .box_title{ width:334px; padding:0px 8px; height:35px; line-height:35px; background:#ECECEC}
</style>
<div id="box_t">
<div class="box_title">
<span class="close" style="float:right; display:inline; font-size:12px; cursor:pointer">最小</span><span>邀请提示</span> 本信息3秒后自动处理！
</div>
<div class="box_content">
<p>欢迎你访问本博客！web前端开发博主真诚邀请你加入。<br /><strong style="color:red">前端开发交流群:51056097。</strong><br />验证信息是:<em></em><br />请你牢记本站博客:http://suiyidian.cn</p>
</div>
</div>
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /></p>
</body>
</html>在上可以看一上，里面有jqurey库，大家别忘记了。如果要看效果，那就是当你进来我的博客的时个那个效果就是。如果想在看，请先清除浏览器的cookie在刷新我的博客就可以了。