JavaScript：用户关闭横幅并不'；未来30天不展示横幅

我有一个JavaScript脚本，可以在用户与横幅交互并使用X按钮关闭横幅后，在特定时间内隐藏横幅

当用户关闭此横幅时，横幅01可能会隐藏一天（24小时）

当用户关闭此横幅时，横幅02可能会隐藏30天

现在我的代码不能像我希望的那样工作，用户甚至不能关闭其中一个横幅

当我使用为Banner 01设计的部分Javascript并对其进行测试时，Banner 01工作良好，在用户关闭后显示，24小时后将再次显示此横幅

我需要这个确切的功能为旗帜02，但不是24小时，而是30天。这两个横幅可以在一个站点上协同工作

对于我如何使用这两个横幅以及我上面提到的每一个横幅的功能，有什么解决方案吗

//Banner 01
const header=document.getElementById（'mainheader'）
const bannercloser=document.getElementById（'bannercloser'）
const banner=document.getElementById（'mainbanner'）
函数getCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i{
setTimeout（函数（）{
banner.classList.remove（'disabled'）；
header.classList.remove（'disabled'）；
}, 1 * 24 * 60 * 60 * 1000)
var d=新日期（）；
d、 设置时间（d.getTime（）+（1*24*60*60*1000））；
var expires=“；expires=“+d.togmString（）；
document.cookie=“banner=1”+过期+“路径=/”；
banner.classList.add（'disabled'）；
header.classList.add（'disabled'）；
})
//横幅02
const cookiesCloser=document.getElementById（'cookiesCloser'））
const cookiesBanner=document.getElementById（'cookiesBanner'）
函数getCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i{
setTimeout（函数（）{
cookiesBanner.classList.remove（'disabled'）；
}, 30 * 24 * 60 * 60 * 1000)
var d=新日期（）；
d、 设置时间（d.getTime（）+（30*24*60*60*1000））；
var expires=“；expires=“+d.togmString（）；
document.cookie=“banner=1”+过期+“路径=/”；
cookiesBanner.classList.add（'disabled'）；
})

#cookiesBanner{
背景：粉红色；
}
.公告横幅{
背景：橙色；
}
#cookiesBanner.disabled{
显示：无；
}
.announcement-banner.disabled{
显示：无；
}

Banner 01
X
横幅02

X

您的两个横幅具有相似的行为。它们之间唯一的区别是某种配置（cookie的名称、过期日期等）。这些配置可以作为HTML元素上的数据属性传递。例如：

...

在JavaScript文件中，您可以尝试查找页面上应该具有类似横幅行为的每个元素，并在其上循环。然后，为每个横幅读取由属性设置的配置，并侦听单击事件

与其决定是否应该隐藏横幅，不如尝试确定是否应该显示横幅。这样，横幅总是隐藏的，除非没有cookie

这种方法也具有很强的可扩展性。添加另一个具有自己名称和过期日期的banner元素只需要将另一个banner元素添加到HTML中

由于cookie的安全原因，下面的示例不会在堆栈代码段中运行，但您应该在本地环境中尝试此操作，并查看它的运行情况

函数getCookie（名称）{ 常量nameEQ=name+“=”； const ca=document.cookie.split（“；”）； for（设i=0；i{ //从数据属性中读取名称和过期值。 const{name，expire}=banner.dataset； //属性包含字符串作为值。 //但我们需要一个数字，以便稍后进行日期计算。 //因此，必须将字符串转换为数字。 const daysToExpire=编号（expire）； //如果cookie不存在，则显示元素。 如果（！getCookie（名称））{ banner.classList.add（'visible'）； } //聆听每个横幅上的点击。 //事件对象将为您提供有关已单击的元素的信息。 //通过这种方式，您可以检测横幅内的按钮是否已被单击。 //单击按钮后设置cookie，并从DOM中删除横幅。 banner.addEventListener（'click'，event=>{ if（event.target.closest（'.banner close'））{ setCookie（名称、日期、到期日期）； banner.remove（）； } }); });

.ban