实现24小时点击关闭后不再弹出的JS广告代码

资源摘要信息: "JS点击关闭弹窗广告24小时不显示" 的实现主要涉及到前端编程技术，特别是JavaScript的使用。本知识点将详细介绍如何通过JavaScript实现一个点击关闭按钮后，24小时内不会再显示的弹窗广告系统。 首先，要实现这样的功能，我们需要考虑以下几个关键步骤： 1. 弹窗广告的基本显示与关闭逻辑 2. 使用Cookie来记录用户的关闭操作 3. 在用户下次访问时读取Cookie，并根据Cookie中的信息决定是否显示弹窗 4. 设置Cookie的有效时间为24小时 下面将详细展开每个步骤的知识点。 ### 弹窗广告的基本显示与关闭逻辑 要实现一个基本的弹窗广告，通常需要HTML来构建弹窗的结构，CSS来设计弹窗的样式，以及JavaScript来控制弹窗的显示和隐藏。以下是一个非常基础的实现： HTML: ```html <div id="popup" class="popup"> <div class="content"> <!-- 弹窗内容 --> <p>这里是广告内容</p> <!-- 关闭按钮 --> <span id="closeBtn">关闭</span> </div> </div> ``` CSS: ```css .popup { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; /* 其他样式 */ } /* 当需要显示弹窗时，改变其display属性为block或flex */ ``` JavaScript: ```javascript document.addEventListener('DOMContentLoaded', function() { var popup = document.getElementById('popup'); var closeBtn = document.getElementById('closeBtn'); closeBtn.addEventListener('click', function() { popup.style.display = 'none'; // 隐藏弹窗 }); // 其他逻辑，例如页面加载时显示弹窗 // popup.style.display = 'block'; // 显示弹窗 }); ``` ### 使用Cookie来记录用户的关闭操作 在用户关闭弹窗时，我们可以通过JavaScript将用户的这一操作记录到Cookie中。这样即使页面刷新，我们也可以从Cookie中读取到用户关闭弹窗的信息，并据此决定是否再次显示弹窗。 JavaScript: ```javascript function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } // 关闭弹窗时 function closePopup() { var popup = document.getElementById('popup'); popup.style.display = 'none'; setCookie('popupClosed', 'yes', 1); // 设置Cookie有效期为1天 } // 页面加载时 document.addEventListener('DOMContentLoaded', function() { // 检查Cookie var popupClosed = readCookie('popupClosed'); if (!popupClosed) { var popup = document.getElementById('popup'); popup.style.display = 'block'; // 显示弹窗 } }); // 读取Cookie function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } ``` ### 在用户下次访问时读取Cookie，并根据Cookie中的信息决定是否显示弹窗 如上面的代码所示，我们在页面加载时，通过读取Cookie来决定是否显示弹窗。这里有一个小技巧：设置Cookie的有效时间为24小时，而不是1天。这是因为Cookie的1天是从设置时间开始计算的，而用户的访问时间是随机的。因此，如果设置成1天，用户在一天的后半段关闭了弹窗，那么在第二天的前半段可能还会看到弹窗。通过设置为24小时，我们可以更准确地控制弹窗显示的时间窗口。 ### 设置Cookie的有效时间为24小时 在上面的`setCookie`函数中，我们将Cookie的有效时间设置为1天。这通过`expires`参数来实现，它是一个表示UTC时间的字符串。具体到24小时，我们需要计算从当前时间开始，向后推24小时的时间点，并将其转换为字符串格式。 综上所述，通过构建HTML结构、CSS样式、JavaScript逻辑，并合理利用Cookie，我们就可以实现一个在用户点击关闭后，24小时之内不再显示的弹窗广告系统。这个系统既提升了用户体验，又保证了广告的展示频率，是一种有效的广告策略。