HTML | CSS | JS 在线运行工具
实时编辑和预览您的代码
📄
HTML
<!DOCTYPE html> <html> <head> <title>示例页面</title> </head> <body> <h1>欢迎使用在线编辑器</h1> <p>这是一个简单的示例，尝试编辑HTML、CSS或JavaScript代码</p> <div id="demo">点击下方按钮试试！</div> <button onclick="showMessage()">点击我</button> </body> </html>
🎨
CSS
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; } button { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 15px; } button:hover { background: #2980b9; } #demo { padding: 15px; background: #eee; border-radius: 5px; margin: 15px 0; }
⚙️
JavaScript
function showMessage() { const demo = document.getElementById('demo'); demo.innerHTML = '恭喜！JavaScript代码运行成功！'; demo.style.background = '#d4edda'; demo.style.color = '#155724'; demo.style.border = '1px solid #c3e6cb'; } // 添加一些交互效果 document.addEventListener('DOMContentLoaded', function() { const demo = document.getElementById('demo'); demo.addEventListener('mouseover', function() { this.style.transform = 'scale(1.02)'; this.style.transition = 'transform 0.3s'; }); demo.addEventListener('mouseout', function() { this.style.transform = 'scale(1)'; }); });
实时预览
运行中
控制面板
运行代码
保存代码
重置代码
代码示例
示例1: 计数器
示例2: 待办列表
示例3: 时钟
关于
这是一个在线代码编辑器，您可以在左侧编辑HTML、CSS和JavaScript代码，然后实时查看结果。