JS使用cookie实现DIV提示框只显示一次的方法

JS使用cookie实现DIV提示框只显示一次的方法可以分为以下几个步骤:

JS使用cookie实现DIV提示框只显示一次的方法可以分为以下几个步骤:

  1. 判断cookie是否存在
  2. 如果cookie不存在,则显示DIV提示框,并设置cookie
  3. 如果cookie存在,则不显示DIV提示框

具体步骤如下:

  1. 判断cookie是否存在:
function getCookie(name) {
  var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) {
    return unescape(arr[2]);
  }
  return null;
}

var isShow = getCookie("isShow");
if (isShow != null && isShow == "false") {
  // do not show div
} else {
  // show div
}
  1. 如果cookie不存在,则显示DIV提示框,并设置cookie:
function setCookie(name, value, day) {
  var expires = "";
  if (day) {
    var date = new Date();
    date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + escape(value) + expires + "; path=/";
}

var isShow = getCookie("isShow");
if (isShow == null) {
  // show div
  setCookie("isShow", "false", 30); // 30 days
}
  1. 如果cookie存在,则不显示DIV提示框:
var isShow = getCookie("isShow");
if (isShow != null && isShow == "false") {
  // do not show div
} else {
  // show div
}

以下是两个示例:

  1. 示例一:
<div id="tip" style="display:none;">This is a div tip.</div>

<script>
function getCookie(name) {
  var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) {
    return unescape(arr[2]);
  }
  return null;
}

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

var isShow = getCookie("isShow");
if (isShow == null) {
  // show div
  setCookie("isShow", "false", 30); // 30 days
  document.getElementById("tip").style.display = "block";
}
</script>
  1. 示例二:
<div id="tip" style="display:none;">This is a div tip.</div>

<script>
function getCookie(name) {
  var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) {
    return unescape(arr[2]);
  }
  return null;
}

var isShow = getCookie("isShow");
if (isShow != null && isShow == "false") {
  // do not show div
} else {
  // show div
  document.getElementById("tip").style.display = "block";
}

document.getElementById("close-btn").onclick = function() {
  document.getElementById("tip").style.display = "none";
  setCookie("isShow", "false", 30); // 30 days
};
</script>

在示例二中,还增加了一个点击关闭按钮后设置cookie的功能,确保用户可以关闭DIV提示框之后不再显示。

本文标题为:JS使用cookie实现DIV提示框只显示一次的方法

基础教程推荐