css 如何使用JavaScript创建临时横幅?

oknwwptz  于 2023-05-02  发布在  Java
关注(0)|答案(1)|浏览(105)

我是这个领域的新手,目前正在建立一个网站。我用HTML和CSS创建了一个cookie横幅。我需要知道如何才能使它只启动一次“例如每24小时”为每个用户。
我试着用IP地址来区分不同的用户,但我不知道如何记住它。

vltsax25

vltsax251#

要使您的cookie横幅每24小时仅显示一次,您可以使用浏览器cookie来存储用户的同意信息。下面是如何实现它:
当用户接受cookie横幅时,在其浏览器中设置一个cookie,其有效期为当前时间起24小时。
当用户访问您的网站时,请检查Cookie是否存在,以及是否尚未过期。如果cookie存在且未过期,则不显示cookie横幅。否则,显示横幅。

function setCookie(name, value, hours) {
  var expires = "";
  if (hours) {
    var date = new Date();
    date.setTime(date.getTime() + hours * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function showCookieBanner() {
  var cookieBanner = document.getElementById("cookie-banner");
  if (getCookie("cookieConsent") === null) {
    cookieBanner.style.display = "block";
  } else {
    cookieBanner.style.display = "none";
  }
}

function acceptCookies() {
  setCookie("cookieConsent", "true", 24);
  document.getElementById("cookie-banner").style.display = "none";
}

window.onload = function() {
  showCookieBanner();
};

相关问题