网站右下角插入纯JS的广告框

邓草

已于 2024-09-26 16:57:27 修改

阅读量127

点赞数

分类专栏： HTML Javascript 文章标签： jquery html5 javascript css3 html css

于 2024-09-25 21:17:23 首次发布

本文链接：https://blog.csdn.net/qq363685855/article/details/142533387

版权

Javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

一、简单的页面右下角显示广告

教你在网页的右下角插入纯JS的广告框，主要是用了JQ库。废话不多说，直接上代码：

<!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>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){ 
   $("body").append('<div class="adright"><button class="right_close" onclick="">关闭</button><img src="https://5300.cn/img/gzgzh.png" border=0 /></div>');
　　$(".adright").css({"width":"251px","height":"296px","border":"#ddd","background":"white","right":"50px","bottom":"80px","position":"fixed"});
   $(".right_close").css({"margin-right":"10px","float":"right","margin-top":"10px","cursor":"pointer"});
   $('.right_close').click(function(){
     $('.adright').hide();
     })
}); 
</script>
</head>

<body>

</body>
</html>

二、功能改进：点击关闭后，24小时后再显示广告

如题，功能升级改进，改为：用户点击一次关闭后，24小时后再显示广告，直接上代码：

<!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>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
   $("body").append('<div class="adright"><button class="right_close" onclick="">关闭</button><img src="https://5300.cn/img/gzgzh.png" border=0 /></div>');
　　$(".adright").css({"width":"251px","height":"296px","border":"#ddd","opacity":"1","right":"15px","bottom":"80px","position":"fixed"});
   $(".right_close").css({"margin-right":"10px","float":"right","margin-top":"10px","cursor":"pointer"});
   $('.right_close').click(function(){
     $('.adright').hide();
    setCookie("dcad","5300.cn",1);
     });
	 
if (getCookie("dcad")=="5300.cn") {
	$('.adright').hide();    
} else {
    $('.adright').show();
}

}); 

//设置cookie,设置了 cookie 名、cookie 值、cookie过期时间，单位：天。
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/";
	}

//读取cookie
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++){
		var c = ca[i].trim();
		if(c.indexOf(name)==0)
			return c.substring(name.length,c.length);
		}
		return "";
		}
</script>
</head>

<body>

</body>
</html>