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

Question

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

我们需要的是 cookies 同意警报在 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 和 clearTimeout 。 代码已被修改为使用两个超时函数。

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

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

 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;} }