我想显示一个弹出窗口,持续三天,每天不超过三次。我该如何实现?
HTML模式弹出窗口
<div id="popup1" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content homeaz_popup">
<div class="modal-body">
<div class="banner_bg">
<a class="popup-banner" href="/landing.html">
<img class="banner_img" src="https://homeaz.vn/templates/themes/images/popupgheda.gif" alt="">
</a>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
这是一个开始,使用js-cookie和JavaScript Date object。
基本上是这样:
不是很优雅或简洁,但希望能很好地演示给您做点什么。
测试时,如果要查看已设置的所有cookie,可以使用:
Cookies.get();
要删除Cookie,可以使用:
Cookies.remove("cookie_name_here");
早晨,下午和晚上定义为:
0400 to 1200
1200 to 1700
1700 to 0400
,但是您可以根据需要更改它们。
javascript
// get current time of client
var client_time_now = new Date();
var client_time_now_hour = client_time_now.getHours();
console.log("client_time_now: " + client_time_now);
console.log("client_time_now_hour: " + client_time_now_hour);
// see if client has already visited the site
var final_expiry_date_time = Cookies.get("final_expiry_date_time");
// if first visit
if (final_expiry_date_time === undefined) {
console.log("this is your first visit");
// set the expiry date 3 days from now
// see: https://stackoverflow.com/a/56728401
var final_expiry_date_time_value = new Date(Date.now() + (3600 * 1000 * 72));
// to test expiry works, uncomment below
// var final_expiry_date_time_value = new Date();
console.log("final_expiry_date_time_value: " + final_expiry_date_time_value);
Cookies.set("final_expiry_date_time", final_expiry_date_time_value);
var expired = "false";
Cookies.set("expired", expired);
}
// if not first visit, check if 3 days has elapsed since first visit
else {
console.log("this is not your first visit");
// is current datetime greater than expiry datetime
// see: https://stackoverflow.com/a/493018
var expired = client_time_now.getTime() > new Date(Cookies.get("final_expiry_date_time")).getTime();
// for consistency, cookies are stored as strings
expired = expired.toString();
console.log("expired: " + expired);
// if expired, remove cookies and set expired to true
if (expired === "true") {
Cookies.set("expired", "true");
Cookies.remove("morning");
Cookies.remove("afternoon");
Cookies.remove("night");
} else {
Cookies.set("expired", "false");
}
}
if (expired === "false") {
// see if visits have been completed during these times
var already_visited_morning = Cookies.get("morning");
var already_visited_afternoon = Cookies.get("afternoon");
var already_visited_night = Cookies.get("night");
// morning handling - 4am to 12pm
if (client_time_now_hour > 3 && client_time_now_hour <= 11) {
var day_segment = "morning";
if (already_visited_morning === "true") {
console.log("you've already visited this morning");
} else {
Cookies.set("morning", "true");
// show your popup
$("#modal_bg").show();
// adjust greeting text depending on time of day
$("#greeting").text("good morning");
}
}
// afternoon handling - 12pm to 5pm
else if (client_time_now_hour > 11 && client_time_now_hour <= 16) {
var day_segment = "afternoon";
if (already_visited_afternoon === "true") {
console.log("you've already visited this afternoon");
} else {
Cookies.set("afternoon", "true");
// show your popup
$("#modal_bg").show();
// adjust greeting text depending on time of day
$("#greeting").text("good afternoon");
}
}
// night handling - 5pm to 4am
else if (client_time_now_hour > 16 && client_time_now_hour <= 23 || client_time_now_hour >= 0 && client_time_now_hour <= 3) {
var day_segment = "night";
if (already_visited_night === "true") {
console.log("you've already visited this night");
} else {
Cookies.set("night", "true");
// show your popup
$("#modal_bg").show();
// adjust greeting text depending on time of day
$("#greeting").text("good evening");
}
}
console.log("it's " + day_segment);
console.log("all cookies: ");
console.log(JSON.stringify(Cookies.get(), null, 4));
}
// hide the modal on clicking close button
$(document).on("click", ".close_button", function() {
$("#modal_bg").hide();
});
html
<div id="modal_bg">
<div class="modal_content">
<img src="http://lorempixel.com/400/200/abstract/">
<div id="greeting"></div>
<div class="close_button">X</div>
</div>
</div>
<p>
here is some content.
</p>
css
#modal_bg {
display: none;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
position: absolute;
}
.modal_content {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 400px;
position: relative;
padding: 20px;
background: #fff;
}
.close_button {
background: #dcdcdc;
position: absolute;
top: 0px;
right: 0px;
padding: 10px 20px;
font-family: arial;
font-weight: bold;
}
.close_button:hover {
cursor: pointer;
}
#greeting {
background: #fff;
position: absolute;
bottom: 40px;
padding: 2px 10px;
font-family: arial;
margin-left: 10px;
right: 40px;
}