静态页面演练场

H HTML 结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的演示页面</title>
  <style>
    * { transition: all 0.3s ease; }
  </style>
</head>
<body>
  <div class="container">
    <header class="hero">
      <h1>欢迎使用代码演练场 ✨</h1>
      <p class="subtitle">一个实时预览的代码编辑环境</p>
    </header>
    
    <main class="content">
      <div class="card">
        <h2>📋 功能特性</h2>
        <ul class="features">
          <li>✅ 实时代码预览</li>
          <li>✅ 代码自动格式化</li>
          <li>✅ 深色/浅色主题</li>
          <li>✅ 全屏预览模式</li>
          <li>✅ 代码保存与恢复</li>
        </ul>
      </div>
      
      <div class="card">
        <h2>🎮 交互演示</h2>
        <p>点击下方按钮体验交互效果</p>
        <div class="demo-area">
          <button class="demo-btn" id="demoButton">点击这里</button>
          <div class="counter">
            点击次数: <span id="clickCount">0</span>
          </div>
        </div>
      </div>
    </main>
    
    <footer class="footer">
      <p>使用演练场编写和测试您的代码</p>
    </footer>
  </div>
</body>
</html>

C CSS 样式

/* 演练场演示样式 */
body {
  margin: 0;
  padding: 24px;
  font-family: 'Segoe UI', 'PingFang SC', sans-serif;
  background: linear-gradient(135deg, #f0f7ff, #f8fafc);
  color: #1D2129;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.hero {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(90deg, #165DFF, #4080FF);
  color: white;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(22, 93, 255, 0.2);
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  font-weight: 700;
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card h2 {
  color: #165DFF;
  margin-bottom: 16px;
  font-size: 1.5rem;
}

.features {
  list-style: none;
  padding: 0;
}

.features li {
  padding: 8px 0;
  border-bottom: 1px solid #E8ECEF;
  display: flex;
  align-items: center;
}

.features li:last-child {
  border-bottom: none;
}

.demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
}

.demo-btn {
  background: linear-gradient(90deg, #165DFF, #4080FF);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.demo-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(22, 93, 255, 0.3);
}

.counter {
  font-size: 1.1rem;
  font-weight: 600;
  color: #165DFF;
  padding: 12px 24px;
  background: rgba(22, 93, 255, 0.1);
  border-radius: 8px;
}

.footer {
  text-align: center;
  padding: 24px;
  color: #4E5969;
  font-size: 0.9rem;
  border-top: 1px solid #E8ECEF;
  margin-top: 32px;
}

JS JavaScript 脚本

// 演练场演示脚本
document.addEventListener('DOMContentLoaded', function() {
  // 初始化点击计数器
  let clickCount = 0;
  const clickCountElement = document.getElementById('clickCount');
  const demoButton = document.getElementById('demoButton');
  
  // 更新计数器显示
  function updateCounter() {
    clickCountElement.textContent = clickCount;
    clickCountElement.style.transform = 'scale(1.2)';
    setTimeout(() => {
      clickCountElement.style.transform = 'scale(1)';
    }, 200);
  }
  
  // 按钮点击事件
  demoButton.addEventListener('click', function() {
    clickCount++;
    updateCounter();
    
    // 添加视觉反馈
    demoButton.style.transform = 'scale(0.95)';
    demoButton.style.boxShadow = '0 2px 8px rgba(22, 93, 255, 0.4)';
    
    // 创建点击效果
    createClickEffect(event);
    
    // 恢复按钮状态
    setTimeout(() => {
      demoButton.style.transform = '';
      demoButton.style.boxShadow = '';
    }, 150);
    
    // 显示消息
    showMessage(`已点击 ${clickCount} 次`);
  });
  
  // 创建点击效果
  function createClickEffect(e) {
    const effect = document.createElement('div');
    effect.className = 'click-effect';
    effect.style.cssText = `
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(22, 93, 255, 0.6);
      pointer-events: none;
      transform: translate(-50%, -50%);
      animation: ripple 0.6s ease-out;
    `;
    
    effect.style.left = e.clientX + 'px';
    effect.style.top = e.clientY + 'px';
    
    document.body.appendChild(effect);
    
    // 添加动画
    const style = document.createElement('style');
    style.textContent = `
      @keyframes ripple {
        0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
        100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
      }
    `;
    document.head.appendChild(style);
    
    // 移除效果元素
    setTimeout(() => {
      effect.remove();
      style.remove();
    }, 600);
  }
  
  // 显示临时消息
  function showMessage(text) {
    const message = document.createElement('div');
    message.textContent = text;
    message.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background: linear-gradient(90deg, #00B42A, #00A86B);
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 180, 42, 0.3);
      z-index: 1000;
      font-weight: 600;
      animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    `;
    
    document.body.appendChild(message);
    
    // 添加动画
    const style = document.createElement('style');
    style.textContent = `
      @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
      }
      @keyframes fadeOut {
        to { opacity: 0; transform: translateX(100%); }
      }
    `;
    document.head.appendChild(style);
    
    // 移除消息
    setTimeout(() => {
      message.remove();
      style.remove();
    }, 3000);
  }
  
  // 初始化
  updateCounter();
});

实时预览已开启

📊 实时预览