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

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

原文可在线查看效果：愚人节恶搞代码-张苹果博客
网页中通过script引入下方链接即可使用。

language 复制代码

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

实现步骤

一，创建"系统错误"遮罩层

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

JavaScript 复制代码

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>
`;

二，添加样式动画

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

language 复制代码

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

三，完整JS代码

JavaScript 复制代码

(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()
  })();