如何添加 JavaScript cookie 同意警报在 3 分钟后消失

Question

这是一个有效的 JavaScript cookie 同意警报，但如果用户单击接受按钮，此警报不会消失。

我们需要 cookie 同意警报在 2 分钟后消失，当用户没有点击接受按钮时，这个怎么办？

此代码完美运行，还添加到 codepen https://codepen.io/MrUmang/pen/oNYZLej

cookieLaw = {
  dId: "cookie-law-div",
  bId: "cookie-law-button",
  iId: "cookie-law-item",
  show: function(e) {
    if (localStorage.getItem(cookieLaw.iId)) return !1;
    var o = document.createElement("div"),
      i = document.createElement("p"),
      t = document.createElement("button");
    i.innerHTML = e.msg, t.id = cookieLaw.bId, t.innerHTML = e.ok, o.id = cookieLaw.dId, o.appendChild(t), o.appendChild(i), document.body.insertBefore(o, document.body.lastChild), t.addEventListener("click", cookieLaw.hide, !1)
  },
  hide: function() {
    document.getElementById(cookieLaw.dId).outerHTML = "", localStorage.setItem(cookieLaw.iId, "1")
  }
}, cookieLaw.show({
  msg: "We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='https://sarkari.in/cookie-policy/'>Find out more.</a>",
  ok: "Okay, thanks"
});

#cookie-law-div {
  z-index: 10000000;
  position: fixed;
  bottom: 3%;
  right: 2%;
  padding: 5px 12px;
  max-width: 400px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  font-size: 15px;
  box-shadow: rgba(23,43,99,.4) 0 7px 28px;
}


#cookie-law-div a {
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.5);
}

#cookie-law-div a:hover {
  opacity: .7;
}

#cookie-law-div p {
  margin: 0;
  color: #000;
  padding-right: 70px;
}

#cookie-law-div button {
  position: absolute;
  right: .5em;
  top: 20px;
  align-self: center;
  line-height: 33px;
  color: #fff;
  background-color: #000;
  border: none;
  opacity: .9;
  font-size: 12px;
  cursor: pointer;
  border-radius: 19px;
}

#cookie-law-div button:hover {
  opacity: 1;
}
@media (max-width:600px) {
  #cookie-law-div {
    border-radius: 0;
    font-size: 13px;
    max-width: 100%;
    right: 0;
    bottom: 0;
  }
#cookie-law-div p {padding-right: 75px;}
}

Answer 1

使用setTimeout and clearTimeout。代码已修改为使用两个超时函数。

timeout 属性定义调用cookieLaw.hide 函数之前等待的秒数。

timeoutId 属性存储了超时的 id，以便在cookieLaw.hide 执行时可以通过clearTimeout 函数调用将其删除。

cookieLaw = {
  dId: "cookie-law-div",
  bId: "cookie-law-button",
  iId: "cookie-law-item",
  timeout: 120,
  timeoutId: -1,
  show: function(e) {
    if (localStorage.getItem(cookieLaw.iId)) return !1;
    var o = document.createElement("div"),
      i = document.createElement("p"),
      t = document.createElement("button");
    i.innerHTML = e.msg, t.id = cookieLaw.bId, t.innerHTML = e.ok, o.id = cookieLaw.dId, o.appendChild(t), o.appendChild(i), document.body.insertBefore(o, document.body.lastChild), t.addEventListener("click", cookieLaw.hide, !1);
    cookieLaw.timeoutId = window.setTimeout(cookieLaw.hide, cookieLaw.timeout*1000);
  },
  hide: function() {
    document.getElementById(cookieLaw.dId).outerHTML = "", localStorage.setItem(cookieLaw.iId, "1");
    window.clearTimeout(cookieLaw.timeoutId);
  }
}, cookieLaw.show({
  msg: "We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='https://sarkari.in/cookie-policy/'>Find out more.</a>",
  ok: "Okay, thanks"
});

#cookie-law-div {
  z-index: 10000000;
  position: fixed;
  bottom: 3%;
  right: 2%;
  padding: 5px 12px;
  max-width: 400px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  font-size: 15px;
  box-shadow: rgba(23,43,99,.4) 0 7px 28px;
}


#cookie-law-div a {
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.5);
}

#cookie-law-div a:hover {
  opacity: .7;
}

#cookie-law-div p {
  margin: 0;
  color: #000;
  padding-right: 70px;
}

#cookie-law-div button {
  position: absolute;
  right: .5em;
  top: 20px;
  align-self: center;
  line-height: 33px;
  color: #fff;
  background-color: #000;
  border: none;
  opacity: .9;
  font-size: 12px;
  cursor: pointer;
  border-radius: 19px;
}

#cookie-law-div button:hover {
  opacity: 1;
}
@media (max-width:600px) {
  #cookie-law-div {
border-radius: 0;
font-size: 13px;
max-width: 100%;
right: 0;
bottom: 0;
  }
#cookie-law-div p {padding-right: 75px;}
}