愚人节恶搞代码：系统错误倒计时与节日彩蛋动画

距离愚人节还有一周时间，在这个充满创意和恶搞的节日，作为一名站长，我们可以通过代码为网页添加一些有趣的互动效果。比如下面分享的一段JavaScript代码，可以帮助你在网页上创建一个逼真的系统错误画面，并在倒计时结束后显示一个彩蛋动画。让你的网站在愚人节当天给用户带来惊喜和乐趣！

原文可在线查看效果：愚人节恶搞代码-张苹果博客

网页中通过script引入下方链接即可使用。

<script src="https://img.zhangpingguo.com/web/xtcw/error.js"></script>

实现步骤

一，创建“系统错误”遮罩层

首先，创建一个全屏的遮罩层，模拟系统错误的效果。遮罩层包括警告图标、错误信息、倒计时和进度条。

const overlay = document.createElement('div');
overlay.id = 'shutdownOverlay';
overlay.style.display = 'none';
overlay.innerHTML = `<div class="bsod"><div class="warning"><div class="warning-icon">⚠️</div><h1>系统严重错误</h1><p>检测到不兼容的硬件驱动 (代码: 0xAPRIL_FOOL)</p><div class="countdown">00:05</div></div><div class="progress-bar"></div></div>
`;

二，添加样式动画

为了让遮罩层看起来更加逼真，为其添加样式，并定义一些动画效果，比如警告图标的脉冲动画和进度条的填充效果。

......具体代码下面都有了，这就不写了...

三，完整JS代码

(function() {// 创建系统错误遮罩层const overlay = document.createElement('div');overlay.id = 'shutdownOverlay';overlay.style.display = 'none';overlay.innerHTML = `<div class="bsod"><div class="warning"><div class="warning-icon">⚠️</div><h1>系统严重错误</h1><p>检测到不兼容的硬件驱动 (代码: 0xAPRIL_FOOL)</p><div class="countdown">00:05</div></div><div class="progress-bar"></div></div>`;Object.assign(overlay.style, {position: 'fixed',top: 0,left: 0,width: '100%',height: '100%',background: '#0078d4',color: 'white',zIndex: 99999,fontFamily: 'Segoe UI, sans-serif',display: 'flex',alignItems: 'center',justifyContent: 'center',flexDirection: 'column'});document.body.appendChild(overlay);// 创建样式const style = document.createElement('style');style.textContent = `@keyframes explode {0% { transform: scale(0); opacity: 1; }100% { transform: translate(${Math.random()*200-100}px, ${Math.random()*200-100}px) scale(3); opacity: 0; }}@keyframes float {0%, 100% { transform: translate(-50%, -55%); }50% { transform: translate(-50%, -45%); }}.warning {text-align: center;margin-bottom: 2rem;}.warning-icon {font-size: 5rem;animation: pulse 1s infinite;}.progress-bar {width: 300px;height: 3px;background: rgba(255,255,255,0.3);margin-top: 2rem;}.progress-bar::after {content: '';display: block;width: 0;height: 100%;background: white;transition: width 1s linear;}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }}`;document.head.appendChild(style);// 倒计时逻辑let seconds = 5;const countdownElement = overlay.querySelector('.countdown');const progressBar = overlay.querySelector('.progress-bar');function formatTime(s) {return `00:${s.toString().padStart(2, '0')}`;}function startCountdown() {overlay.style.display = 'flex';const timer = setInterval(() => {seconds--;countdownElement.textContent = formatTime(seconds);progressBar.style.width = `${(5 - seconds) * 20}%`;if(seconds <= 0) {clearInterval(timer);showEasterEgg();}}, 1000);}// 彩蛋动画function showEasterEgg() {overlay.style.display = 'none';// 创建动画容器const animationContainer = document.createElement('div');Object.assign(animationContainer.style, {position: 'fixed',top: 0,left: 0,width: '100%',height: '100%',pointerEvents: 'none',zIndex: 100000});document.body.appendChild(animationContainer);// 添加节日文字const text = document.createElement('div');text.innerHTML = '🎉 愚人节快乐！ 🎉';Object.assign(text.style, {position: 'absolute',top: '50%',left: '50%',transform: 'translate(-50%, -50%)',fontSize: '3.5rem',animation: 'float 2s ease-in-out infinite'});animationContainer.appendChild(text);// 添加烟花特效const colors = ['🎈', '🎊', '🎁', '✨', '💫'];for(let i=0; i<80; i++) {const emoji = document.createElement('div');emoji.textContent = colors[Math.floor(Math.random()*colors.length)];Object.assign(emoji.style, {position: 'absolute',left: `${Math.random()*100}%`,top: `${Math.random()*100}%`,fontSize: `${25 + Math.random()*30}px`,animation: `explode ${1.5 + Math.random()*2}s ease-out both`});animationContainer.appendChild(emoji);}// 3秒后同时消失setTimeout(() => {animationContainer.remove();}, 3000);}// 启动startCountdown()})();