使用 layer.js 每天首次打开网页弹出图片实例

使用 layer.js 库，保存 Cookie 每天只弹一次。

为了实现每天 首次 打开网页时弹出图片，并且使用 layer.js 库和 Cookie 来确保每天只弹出一次，你可以结合使用 JavaScript 的 Date 对象来检查当前日期，并使用 Cookie 来存储上次显示弹框的日期。

首先，确保你的网页已经引入了 layer.js 和 jquery.js （因为layer.js通常依赖于jQuery）。

完整实例代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>每日首次打开弹出图片</title>  
<link rel="stylesheet" href="path/to/layer/theme/default/layer.css" />  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
<script src="path/to/layer/layer.js"></script>
<script>  
<link rel="stylesheet" href="path/to/jdc-side-panel.css">
<script src="path/to/layer/layer.js"></script>
<style>
    .layui-layer-iframe .layui-layer-title{
        border-bottom: 1px solid #eee !important;
        background-color: #F8F8F8 !important;
        border-radius: 2px 2px 0 0 !important;
    }
</style>
<div class="layer_notice" style="display: none">
    <div style="padding: 15px;width:300px;height:300px;">
        <div style="text-align: center;"><img alt="" src="path/to/XXX.jpg" style="width: 300px; height: 300px;"></div>
    </div>
</div>
<script>
$(document).ready(function() {  
    // 获取当前日期  
    function getCurrentDate() {  
        var today = new Date();  
        var dd = String(today.getDate()).padStart(2, '0');  
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的  
        var yyyy = today.getFullYear();  
        return yyyy + '-' + mm + '-' + dd;  
    }  
  
    // 获取或设置Cookie  
    function getCookie(name) {  
        let matches = document.cookie.match(new RegExp(  
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"  
        ));  
        return matches ? decodeURIComponent(matches[1]) : undefined;  
    }  
  
    function setCookie(name, value, days) {  
        let expires = "";  
        if (days) {  
            const date = new Date();  
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));  
            expires = "; expires=" + date.toUTCString();  
        }  
        document.cookie = name + "=" + (value || "") + expires + "; path=/";  
    }  
  
    // 弹出图片的逻辑  
    function showPopup() {  
        layer.open({
            type: 1,
            shade: false,
            title: false, //不显示标题
            content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){
            }
        });
    }
  
    // 检查是否应该弹出图片  
    function checkAndShowPopup() {  
        const today = getCurrentDate();  
        const lastShown = getCookie('lastPopupDate');  
        if (!lastShown || lastShown !== today) {  
            setCookie('lastPopupDate', today, 1); // 设置Cookie为今天，有效期1天  
            showPopup();  
        }  
    }  
  
    // 首次加载时检查  
    checkAndShowPopup();  
});  
</script>  

    <!-- 页面内容 -->  
</body>  
</html>

jdc-side-panel.css

弹出图片的逻辑中添加 closeBtn: 0, // 不使用layer自带的关闭按钮

1、日期格式：使用了 YYYY-MM-DD 格式来存储和比较日期。
2、Cookie处理：getCookie和setCookie 函数用于读取和设置 Cookie。setCookie 函数中的 days` 参数用于设置Cookie的有效期，这里设置为1天，意味着每天都需要重新检查是否应该弹出图片。
3、图片弹出逻辑：showPopup 函数使用 layer.open 来弹出一个包含图片的层。
4、检查逻辑：checkAndShowPopup 函数在文档加载完成后被调用，它比较当前日期和存储在Cookie中的日期，如果它们不同（或Cookie不存在），则弹出图片并更新Cookie。
确保将 path/to/your/image.jpg 替换为你的图片路径，并根据需要调整 path/to/layer/layer.js 和 path/to/layer/theme/default/layer.css 的路径。