1 0 0

给大家分享一个好玩意!键盘打出特定字母或数字弹窗彩蛋

哆哆 UID:1 管理员
13天前 76 创始人

1、新建一个xiunowiki.js文件放到网站根目录

(function() {
    document.addEventListener('DOMContentLoaded', function() {
        var overlay = document.createElement('div');
        overlay.id = 'easter-egg-overlay';
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
        overlay.style.backdropFilter = 'blur(10px)';
        overlay.style.display = 'none';
        overlay.style.justifyContent = 'center';
        overlay.style.alignItems = 'center';
        overlay.style.zIndex = '1000';

        var overlayContent = document.createElement('div');
        overlayContent.className = 'easter-egg-content';
        overlayContent.style.textAlign = 'center';
        overlayContent.style.color = '#333';
        overlayContent.style.fontSize = '2rem';
        overlayContent.style.fontWeight = 'bold';
        overlayContent.style.padding = '20px';
        overlayContent.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
        overlayContent.style.borderRadius = '10px';
        overlayContent.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.2)';
        
        overlay.appendChild(overlayContent);
        document.body.appendChild(overlay);

        var input = '';

        var easterEggs = {
            '222': {
                type: 'image',
                content: 'https://ps.ssl.qhimg.com/t02582e25488b36f07a.jpg',  //换成自己的二维码
                title: '扫描二维码关注我们'
            },
            'qqq': {
                type: 'text',
                content: '8888888',  //换成自己的QQ
                title: '站长QQ'
            }
        };

        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                clean();
            }
        });

        document.addEventListener('keydown', function(e) {
            if (overlay.style.display === 'flex') {
                if (e.key === 'Escape' || e.key === 'Enter') {
                    clean();
                    return;
                }
            }
            
            if (e.key === 'Backspace') {
                input = input.slice(0, -1);
                return;
            }
            
            if (/^[a-zA-Z0-9]$/.test(e.key)) {
                input += e.key.toLowerCase();
                
                for (var sequence in easterEggs) {
                    if (input.endsWith(sequence)) {
                        play(sequence);
                        input = "";
                        break;
                    }
                }
                
                if (input.length > 20) {
                    input = input.slice(-20);
                }
            }
        });

        function play(sequence) {
            var eggData = easterEggs[sequence];
            
            overlayContent.innerHTML = '';
            
            var title = document.createElement('div');
            title.style.marginBottom = '15px';
            title.textContent = eggData.title;
            overlayContent.appendChild(title);
            
            if (eggData.type === 'image') {
                var img = document.createElement('img');
                img.src = eggData.content;
                img.style.maxWidth = '200px';
                img.style.maxHeight = '200px';
                img.style.display = 'block';
                img.style.margin = '0 auto';
                overlayContent.appendChild(img);
            } else if (eggData.type === 'text') {
                var text = document.createElement('div');
                text.style.fontSize = '1.8rem';
                text.textContent = eggData.content;
                overlayContent.appendChild(text);
            }
            
            overlay.style.display = 'flex';
            
            setTimeout(clean, 10000);
        }

        function clean() {
            overlay.style.display = 'none';
        }
    });
})();
JavaScript
 

2、把这个放到网站底部

<script src="xiunowiki.js"></script>
Markup
 

OK搞定以后自己测试一下吧!

PS:把里面的内容改成自己的,222和qqq是键盘打的输出

给大家分享一个好玩意!键盘打出特定字母或数字弹窗彩蛋
上传时间:13天前
上传用户:哆哆

关闭
最新回复 (1)
只看楼主
全部楼主

请先登录后发表评论!

广告推荐
返回
广告推荐
请先登录后发表评论!