酷秀博客
首页/键盘打出特定字母或数字弹窗彩蛋(网络转载)教程

键盘打出特定字母或数字弹窗彩蛋(网络转载)站长

admin的头像admin4个月前教程146热度

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


(function() {<br />
    document.addEventListener('DOMContentLoaded', function() {<br />
        var overlay = document.createElement('div');<br />
        overlay.id = 'easter-egg-overlay';<br />
        overlay.style.position = 'fixed';<br />
        overlay.style.top = '0';<br />
        overlay.style.left = '0';<br />
        overlay.style.width = '100%';<br />
        overlay.style.height = '100%';<br />
        overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';<br />
        overlay.style.backdropFilter = 'blur(10px)';<br />
        overlay.style.display = 'none';<br />
        overlay.style.justifyContent = 'center';<br />
        overlay.style.alignItems = 'center';<br />
        overlay.style.zIndex = '1000';<br />
<br />
        var overlayContent = document.createElement('div');<br />
        overlayContent.className = 'easter-egg-content';<br />
        overlayContent.style.textAlign = 'center';<br />
        overlayContent.style.color = '#333';<br />
        overlayContent.style.fontSize = '2rem';<br />
        overlayContent.style.fontWeight = 'bold';<br />
        overlayContent.style.padding = '20px';<br />
        overlayContent.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';<br />
        overlayContent.style.borderRadius = '10px';<br />
        overlayContent.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.2)';<br />
        <br />
        overlay.appendChild(overlayContent);<br />
        document.body.appendChild(overlay);<br />
<br />
        var input = '';<br />
<br />
        var easterEggs = {<br />
            '222': {<br />
                type: 'image',<br />
                content: 'https://ps.ssl.qhimg.com/t02582e25488b36f07a.jpg',  //换成自己的二维码<br />
                title: '扫描二维码关注我们'<br />
            },<br />
            'qqq': {<br />
                type: 'text',<br />
                content: '8888888',  //换成自己的QQ<br />
                title: '站长QQ'<br />
            }<br />
        };<br />
<br />
        overlay.addEventListener('click', function(e) {<br />
            if (e.target === overlay) {<br />
                clean();<br />
            }<br />
        });<br />
<br />
        document.addEventListener('keydown', function(e) {<br />
            if (overlay.style.display === 'flex') {<br />
                if (e.key === 'Escape' || e.key === 'Enter') {<br />
                    clean();<br />
                    return;<br />
                }<br />
            }<br />
            <br />
            if (e.key === 'Backspace') {<br />
                input = input.slice(0, -1);<br />
                return;<br />
            }<br />
            <br />
            if (/^[a-zA-Z0-9]$/.test(e.key)) {<br />
                input  = e.key.toLowerCase();<br />
                <br />
                for (var sequence in easterEggs) {<br />
                    if (input.endsWith(sequence)) {<br />
                        play(sequence);<br />
                        input = "";<br />
                        break;<br />
                    }<br />
                }<br />
                <br />
                if (input.length > 20) {<br />
                    input = input.slice(-20);<br />
                }<br />
            }<br />
        });<br />
<br />
        function play(sequence) {<br />
            var eggData = easterEggs[sequence];<br />
            <br />
            overlayContent.innerHTML = '';<br />
            <br />
            var title = document.createElement('div');<br />
            title.style.marginBottom = '15px';<br />
            title.textContent = eggData.title;<br />
            overlayContent.appendChild(title);<br />
            <br />
            if (eggData.type === 'image') {<br />
                var img = document.createElement('img');<br />
                img.src = eggData.content;<br />
                img.style.maxWidth = '200px';<br />
                img.style.maxHeight = '200px';<br />
                img.style.display = 'block';<br />
                img.style.margin = '0 auto';<br />
                overlayContent.appendChild(img);<br />
            } else if (eggData.type === 'text') {<br />
                var text = document.createElement('div');<br />
                text.style.fontSize = '1.8rem';<br />
                text.textContent = eggData.content;<br />
                overlayContent.appendChild(text);<br />
            }<br />
            <br />
            overlay.style.display = 'flex';<br />
            <br />
            setTimeout(clean, 10000);<br />
        }<br />
<br />
        function clean() {<br />
            overlay.style.display = 'none';<br />
        }<br />
    });<br />
})();<br />
```<br />
<br />
2、把这个放到网站底部<br />
<br />
```html<br />
&lt;script src="xiunowiki.js">&lt;/script&gt;<br />
```<br />
<br />
OK搞定以后自己测试一下吧!<br />
<br />
PS:把里面的内容改成自己的,222和qqq是键盘打的输出
签名: 最忠诚的BUG开发者来自: 重庆市. 火狐浏览器
文章目录