小白也能会!子比美化:二次元风格弹窗 + 时间日期功能一键搞定
饺子

小白也能会!子比美化:二次元风格弹窗 + 时间日期功能一键搞定

blogger头像
blogger 博主
2026.05.15 · 约 22 分钟 · 0 评论 · 0 喜爱

饺子给大家分享个二次元弹窗,有喜欢的伙伴 拿去自行部署玩玩吧每日仅首次访问显示弹窗,点击任意位置关闭弹窗 食用教程 将下列代码粘贴到”zibll主题设置->全局&功能->自定义代码->自定义头部HTML“中: [hide…

饺子给大家分享个二次元弹窗,有喜欢的伙伴 拿去自行部署玩玩吧
每日仅首次访问显示弹窗,点击任意位置关闭弹窗

食用教程

将下列代码粘贴到”zibll主题设置->全局&功能->自定义代码->自定义头部HTML“中:

[hidecontent type="reply"]
<style>

        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        }

        body {
            min-height: 100vh;
            background: #f5f7ff;
        }

        #welcome-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.05); /* 近乎透明,看清后方内容 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        #welcome-popup.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* 隐藏后不响应点击 */
        }

        .popup-content {
            background: white;
            border-radius: 20px;
            padding: 32px;
            text-align: center;
            max-width: 90%;
            width: 420px;
            box-shadow: 0 12px 40px rgba(100, 100, 255, 0.3);
            position: relative;
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes popIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* LOGO样式 - 无留白、完整显示 */
        .logo {
            width: auto;          
            max-width: 100%;      
            height: 80px;         
            margin: 0 auto 10px;  
            display: block;       
            object-fit: contain;  
            object-position: center;
            border: none;         
            background: transparent;
            box-shadow: none;     
        }

        .popup-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #ff66b2;
            margin-bottom: 16px;
            text-shadow: 0 1px 2px rgba(255, 102, 178, 0.2);
        }

        .popup-desc {
            font-size: 1.4rem;
            color: #555;
            margin-bottom: 16px;
            line-height: 1.5;
        }

        .time-info {
            background: #f9f0ff;
            padding: 12px;
            border-radius: 12px;
            margin: 16px 0;
            font-size: 1.3rem;
            color: #8a55aa;
            border: 1px dashed #e0c0ff;
        }

        .popup-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 20px;
        }

        .popup-btn {
            flex: 1;
            padding: 12px 16px;
            border: none;
            border-radius: 12px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background: linear-gradient(to right, #ff7eb3, #ff758c);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(to right, #a18cd1, #fbc2eb);
            color: white;
        }

        .popup-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .popup-btn:active {
            transform: translateY(0);
        }

        /* 取消页面滚动禁止,看清后方内容 */
        body.popup-open {
            overflow: auto;
        }

        /* 适配移动端 */
        @media (max-width: 480px) {
            .popup-content {
                padding: 24px 16px;
            }
            .logo {
                height: 60px;
            }
            .popup-title {
                font-size: 1.5rem;
            }
            .popup-desc {
                font-size: 1.2rem;
            }
            .time-info {
                font-size: 1.1rem;
            }
            .popup-btn {
                font-size: 1rem;
                padding: 10px 12px;
            }
        }
    </style>
    <!-- 二次元风格弹窗(默认隐藏) -->
    <div id="welcome-popup" class="hidden">
        <div class="popup-content">
            <img src="https://cs.yykbk.com/wp-content/uploads/2026/02/20260226022816570-1111-scaled.webp" alt="优源库LOGO" class="logo" />
            <h2 class="popup-title">欢迎光临!(优源库)/</h2>
            <p class="popup-desc">这里是我们的小站,希望你能喜欢~</p>
            <div class="time-info">
                <div>📅 今天是:<span id="today-date"></span></div>
                <div>⏰ 当前时间:<span id="current-time"></span></div>
            </div>
            <div class="popup-buttons">
                <button class="popup-btn btn-primary" onclick="goToLink('https://cs.yykbk.com/yl'">
                    立即加入本站
                </button>
                <button class="popup-btn btn-secondary" onclick="closePopup()">
                    开始浏览本站
                </button>
            </div>
        </div>
    </div>

    <script>
        // 更新日期和时间
        function updateTime() {
            try {
                const now = new Date();
                const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
                const dateString = now.toLocaleDateString('zh-CN', dateOptions);
                const timeString = now.toLocaleTimeString('zh-CN', { hour12: false });

                const dateElement = document.getElementById('today-date');
                const timeElement = document.getElementById('current-time');

                if (dateElement && timeElement) {
                    dateElement.textContent = dateString;
                    timeElement.textContent = timeString;
                }
            } catch (error) {
                console.error('更新时间失败:', error);
            }
        }

        // 关闭弹窗
        function closePopup() {
            const popup = document.getElementById('welcome-popup');
            if (popup) {
                popup.classList.add('hidden');
                document.body.classList.remove('popup-open');
            }
        }

        // 跳转链接并关闭弹窗
        function goToLink(url) {
            if (url && typeof url === 'string' && url.startsWith('http')) {
                window.open(url, '_blank');
                closePopup();
            } else {
                alert('链接地址无效!');
            }
        }

        // 核心逻辑:判断是否今日首次访问,仅首次显示弹窗
        function checkShowPopup() {
            // 1. 获取今日日期(格式:2026/3/22,确保每日唯一)
            const today = new Date().toLocaleDateString('zh-CN');
            // 2. 读取本地存储中记录的“上次弹窗日期”
            const lastPopupDate = localStorage.getItem('yykbk_popup_date');

            // 3. 仅当“无记录”或“上次日期≠今日”时,才显示弹窗
            if (!lastPopupDate || lastPopupDate !== today) {
                const popup = document.getElementById('welcome-popup');
                popup.classList.remove('hidden'); // 显示弹窗
                document.body.classList.add('popup-open');
                // 4. 记录本次弹窗日期到本地存储(永久保存,次日自动失效)
                localStorage.setItem('yykbk_popup_date', today);
            }
        }

        // 初始化
        window.addEventListener('load', () => {
            updateTime();
            setInterval(updateTime, 1000);

            // 执行弹窗判断逻辑(延迟500ms,避免页面加载卡顿)
            setTimeout(checkShowPopup, 500);

            // 点击弹窗外层关闭弹窗
            const popup = document.getElementById('welcome-popup');
            popup.addEventListener('click', (e) => {
                if (e.target === popup) {
                    closePopup();
                }
            });
        });

        // 监听ESC键关闭弹窗
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closePopup();
            }
        });
    </script>
[/hidecontent]
弹幕表态
我的头像
0/300
文明发言,一起守护温柔的评论区

0 条回复

A文章作者 M管理员
这里需要一条查重率 0% 的评论

还没有评论,来说两句吧~

1会员总数
104文章总数
1073浏览总数
0今日发布
277天稳定运行
  • 波浪
  • 波浪
  • 波浪
  • 波浪

Hello World

页面耗时 0.112 秒 | 数据库查询 63 次 | 内存 1.23 MB | 在线人数:1人

104+

精品文章等您来关注

Copyright © 2025 - 2026 Hello World