[英]How to only display banner to first time visitor?
我的網站上有這個文字橫幅。 我希望它僅向使用Cookie的新訪客顯示。 我對JS的了解很少,因此請幫助我如何僅向首次訪問者展示它。
我在基於Discourse的這個Android論壇站點上使用了它, 該站點已經基於Node.js構建。
<style>
.top {
background: linear-gradient(to right, #141517, #6A9113);
border-radius: 10px;
font-size: 20px;
color: white;
opacity: 0.9;
text-align: center;
padding: 25px;
line-height: 30px;
margin: 10px 0px 30px 0px;
}
</style>
<div class="top">
Welcome to the forum. This is demo text.
</div>
輸入以下代碼:
.top
默認情況下應display: none;
$(document).ready(function() {
var visited = $.cookie("visited")
if (visited == null) {
$('.top').show();
alert($.cookie("visited"));
}
$.cookie('visited', 'yes', { expires: 1, path: '/' });
});
這是完整的代碼...工作演示https://jsfiddle.net/hdas2012/6yjo346k/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="top">
<h2>You will only see it once</h2>
Welcome to the forum. This is demo text.
</div>
<script>
$(document).ready(function(){
if(!$.cookie('welcomeMsg')){
$(".top").show();
$.cookie('welcomeMsg', 'Y', { expires: 365*3 });
}
});
</script>
<style>
.top {
background: linear-gradient(to right, #141517, #6A9113);
border-radius: 10px;
font-size: 20px;
color: white;
opacity: 0.9;
text-align: center;
padding: 25px;
line-height: 30px;
margin: 10px 0px 30px 0px;
display: none;
}
</style>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.