时间戳

首页 > 解决方案 > 关闭后删除元素10分钟

javascript - 关闭后删除元素10分钟

问题描述

我想在关闭它后将其删除 10 分钟。如果在该时间跨度内重新加载页面，则面板应保持移除状态。我正在考虑使用本地存储，但据我所知本地存储没有过期。我正在考虑使用 setTimeout 但不确定如何在这种情况下使用它。此外，这应该完全使用没有任何库的 Javascript 来完成。JSF中。

<section class="newsletter">
  <div id="newsletter_container" class="newsletter_class">
    <h1>
      Panel Title
      <button id="close_btn">
        close
      </button>
    </h1>
    <h3>Panel content
    </h3>
  </div>
</section>

.newsletter {
    position: fixed;
    bottom: 0;
}



@keyframes Slide_down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(250px);
    }

}

#newsletter_container {
  display: block;
    background-color: rgb(0, 122, 193,0.7);
    width: 500px;
}

.slide_down {
  animation: Slide_down 1.4s ease;
}


.newsletter_class {
    display: none;
}



#close_btn {
    float: right;
    background-color: rgb(0, 122, 193,0.7);
    border: none;
    cursor: pointer;
}



@media only screen and (max-width:500px) {
    #newsletter_container {
        width: auto;
    }

    .newsletter_button {
        width: 75%;
        padding: 5px 5px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
}

#newsletter_container h1, h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    padding: 5px 10px;
}

#newsletter_container h1 {
    font-size: 16px;
}

#newsletter_container i {
    color: white;
}

#newsletter_container h3 {
    font-size: 12px;
}

const newsletter = document.getElementById("newsletter_container");
const closeBtn = document.getElementById("close_btn");

closeBtn.addEventListener("click",()=>{
    newsletter.classList.add("slide_down");
    newsletter.addEventListener("webkitAnimationEnd",function(){
        newsletter.remove();
    });
});

编辑：我在重新加载后使用 localStorage 删除了元素，但在重新加载后并没有永久删除。JSF中。

let removeNewsletter = localStorage.getItem('removeNewsletter');

const closeNewsLetter = () => {
    newsletter.classList.add("close");
    localStorage.setItem('removeNewsletter','enabled');
}


if(removeNewsletter === 'enabled'){
    newsletter.style.display = "none"
    newsletter.addEventListener("animationend",function(){
        newsletter.remove();
    });
} 

closeBtn.addEventListener("click",()=>{
    removeNewsletter = localStorage.getItem('removeNewsletter');
    if(removeNewsletter !== 'enabled'){
        newsletter.addEventListener("animationend",function(){
            newsletter.remove();
        });
        closeNewsLetter();
    }
});

var storeddate = Number(localStorage.getItem("storedate"));
if(storeddate){
    let diff = (Date.now() - storeddate / 60000);
    if(diff < 10){
       newsletter.remove();
    }
}

//localStorage.setItem('removeNewsletter',null);

标签： javascripthtmlcss

解决方案

使用javascriptDate.now()方法获取开始时间并保存在本地存储中。在页面加载时获取另一个Date.now()以与页面刷新时存储的时间（如果有）进行比较，并检查差异是否超过 10 分钟。

您可以像这样比较两者：

var storeddate = Number(localStorage.getItem("storeddate"));
if (storeddate){
var diff = (Date.now() - storeddate) / 60000;

if (diff < 10){
newsletter.style.display = "none";
}
}

ps：Date.now()时间以毫秒为单位，因此要以分钟为单位，您需要将其除以 60000

推荐阅读