在F12控制台实现带有彩蛋功能的网页弹窗效果

它的作用

在现代网页开发中，用户体验与互动性是至关重要的元素。为了进一步提升用户与网页的互动性，本文将介绍如何实现一个带有彩蛋功能的网页弹窗效果，并结合控制台的使用，为用户带来意外的惊喜。

我们可以在文章中设置隐藏内容，并将密码巧妙地藏于彩蛋之中，让用户在探索网页时发现并解锁这些隐藏的内容。这种设计不仅增添了网页的趣味性，还增加了用户与网页的互动性，激发用户的好奇心和探索欲望，从而提升整体的用户体验。

效果预览

功能概述

本文实现的功能包括：

1. 检测控制台的打开状态：当用户打开浏览器控制台时，自动触发特定的操作。
2. 延迟执行自定义内容：根据用户浏览器类型，延迟一定时间后输出自定义内容。
3. 彩蛋功能：在控制台中输入特定命令时，显示一个带有动画效果的弹窗，并播放音频。
4. 弹窗动画效果：弹窗具备平滑的打开和关闭动画，提升视觉体验。

实现步骤

1. 初始化与浏览器检测

在实现过程中，首先需要检测用户的浏览器类型。由于不同浏览器在打开控制台时可能输出不同的警告信息，导致清除操作在这些信息未完全输出前就被执行。因此，需要根据浏览器的特性调整延迟时间，确保所有警告信息输出完毕后，再执行清除操作，从而保证自定义内容输出后的整洁。

const detectBrowser = () => {
    const userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.includes('edge') || userAgent.includes('edg')) {
        delayTime = 5000; // 如果是Edge浏览器，延迟5秒
    } else if (userAgent.includes('chrome')) {
        delayTime = 3000; // 如果是Google Chrome浏览器，延迟3秒
    }
};

该函数通过navigator.userAgent来检测浏览器类型，并根据检测结果设置延迟时间。

2. 控制台检测与自定义内容输出

为了在用户打开控制台时触发操作，我们可以通过检查浏览器的窗口大小变化来判断控制台是否打开。一旦检测到控制台被打开，就清理控制台并输出自定义内容。

const detectDevTools = () => {
    const threshold = 160; // 设置一个阈值高度或宽度
    return (window.outerWidth - window.innerWidth > threshold) || 
           (window.outerHeight - window.innerHeight > threshold);
};

const clearConsoleAndOutput = () => {
    if (hasCleared) return;

    console.clear();
    hasCleared = true;

    if (window.console) {
        const styles = {
            gradientTitle: "color:#ffffff; background: linear-gradient(to right, #7A88FF, #d27aff); padding:8px 15px; border-radius: 12px; font-size: 24px; font-weight: bold;",
            bigText: "font-size:50px; font-weight: bold; color: #7A88FF; text-shadow: 2px 2px 0 #d27aff;",
            contentTitle: "color:#ff6347; font-size: 20px; margin: 15px 0 5px; font-weight: bold;",
            content: "color:#333333; background: #f7f7f7; padding:15px; border-radius: 8px; border-left: 5px solid #7A88FF; line-height: 1.6; font-size: 16px;",
            link: "color:#007bff; font-weight: bold; cursor: pointer; font-size: 16px;",
        };

        console.log("%c 开心宝网络工作室", styles.gradientTitle);
        console.log("%c小辉joyb_", styles.bigText);
        console.log(`%c网站：%c开心宝`, styles.contentTitle, styles.content);
        console.log(`%c说明：%c如果你通过控制台的方式获取CSS样式或者其他内容，相信你已经看到了这段说明。如果你想一声不吭的拿走，请务必将所有涉及到的链接和图片保存到本地，谢谢！`, styles.contentTitle, styles.content);
        console.log(`%c更多精彩文章教程，请收藏本站。`, styles.content);

        // 初始化弹窗
        initModal();
    }
};

在这段代码中，我们使用了多个自定义样式来美化控制台输出的内容。这不仅提升了用户体验，还增加了趣味性。

3. 初始化与显示弹窗

接下来，我们需要创建一个弹窗，并确保它在用户输入特定命令时显示。弹窗还会在播放完音频后自动关闭。

const initModal = () => {
    const modalStyles = `
        #xhJoybModal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            background-color: rgba(255, 255, 255, 0.95);
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            text-align: center;
            width: 350px;
            max-width: 90%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }
        #xhJoybModal.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        #xhJoybModal.hide {
            transform: translate(-50%, -50%) scale(0.7);
            opacity: 0;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .modal-button {
            flex: 1;
            margin: 0 5px;
            padding: 10px 0;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            color: #fff;
        }
        .close-button {
            background-color: #7A88FF;
        }
        .close-button:hover {
            background-color: #565DFF;
        }
        .visit-button {
            background-color: #FF6F61;
        }
        .visit-button:hover {
            background-color: #FF5A4C;
        }
        .quote-text {
            font-size: 18px;
            color: #444;
            margin: 20px 0;
            padding: 0 15px;
            line-height: 1.5;
        }
        .image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }
        .qr-code-image {
            width: 160px;
            height: 160px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
        }
    `;

    injectStyles(modalStyles);

    const modal = document.createElement("div");
    modal.id = "xhJoybModal";

    const quoteText = document.createElement("p");
    quoteText.className = "quote-text";
    modal.appendChild(quoteText);

    const imageContainer = document.createElement("div");
    imageContainer.className = "image-container";

    const qrCodeImage = document.createElement("img");
    qrCodeImage.src = "https://cn-sy1.rains3.com/joyb.cc/2024/08/20240818101828688-output-10_18_0.gif";
    qrCodeImage.className = "qr-code-image";
    imageContainer.appendChild(qrCodeImage);

    modal.appendChild(imageContainer);

    const buttonContainer = document.createElement("div");
    buttonContainer.className = "button-container";

    const visitButton = document.createElement("button");
    visitButton.className = "modal-button visit-button";
    visitButton.textContent = "访问开心宝";
    visitButton.addEventListener("click", () => {
        window.location.href = "https://qh.joyb.sbs";
    });
    buttonContainer.appendChild(visitButton);

    const closeButton = document.createElement("button");
    closeButton.className = "modal-button close-button";
    closeButton.textContent = "关闭";
    closeButton.addEventListener("click", () => {
        closeModal(modal, audio);
    });
    buttonContainer.appendChild(closeButton);

    modal.appendChild(buttonContainer);

    const audio = new Audio('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240806203740179-Lucidity-Bloody-Mary.mp3');
    audio.controls = false; 
    audio.style.display = "none"; 

    audio.addEventListener('ended', () => {
        closeModal(modal, audio);
    });

    document.body.appendChild(modal);
    document.body.appendChild(audio);

    if (typeof window.xh_joyb === 'undefined') {
        Object.defineProperty(window, 'xh_joyb', {
            get() {
                modal.classList.remove("show",

 "hide");
                modal.style.display = "block";
                setTimeout(() => {
                    modal.classList.add("show");
                }, 10);

                audio.currentTime = 0; 
                audio.play();

                const quotes = [
                    "成功是属于勇敢者的！",
                    "相信你自己，你比想象中更强大。",
                    "每一次挑战都是进步的机会。",
                    "在前行的路上，保持一颗探索的心。"
                ];
                const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
                quoteText.textContent = randomQuote;

                return randomQuote;
            }
        });
    }
};

这里的弹窗使用了简单的 CSS 过渡效果（transform 和 opacity），以实现平滑的打开和关闭动画。同时，弹窗在播放完音频后自动关闭。

4. 进一步优化

为了确保功能的稳定性和代码的可读性，我们将部分功能模块化为函数，使得整个代码结构更加清晰。这样一来，代码的可维护性和可扩展性也得到了提升。

使用教程

合并后代码(完整)

结语

通过本文的实现，我们成功打造了一个带有彩蛋功能的网页弹窗，结合控制台操作，增加了网页的趣味性。这个功能不仅可以提升用户体验，还能吸引用户进一步探索你的网页。

你可以根据自己的需求对代码进行扩展和调整，比如添加更多的彩蛋功能，或者在不同的用户操作下触发弹窗。希望本文对你有所帮助，如果你有更多问题或需求，欢迎交流探讨。