🥃
Whisky Tools
返回工具列表
🌐
Live HTML Preview
HTML实时预览器
支持HTML/CSS/JS分标签编辑的实时预览工具
🌐 HTML
🎨 CSS
⚡ JavaScript
🗑️ 清空全部
▶️ 运行代码
<div class="container"> <h1>欢迎使用HTML预览器</h1> <p>这是一个实时的HTML预览工具</p> <button onclick="handleClick()">点击我</button> <div id="output"></div> </div>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; min-height: 100vh; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #fff; margin-bottom: 20px; } button { background: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background 0.3s; } button:hover { background: #45a049; } #output { margin-top: 20px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 4px; min-height: 50px; }
function handleClick() { const output = document.getElementById('output'); const now = new Date().toLocaleTimeString(); output.innerHTML = '<p>按钮被点击了！当前时间：' + now + '</p>'; console.log('按钮点击事件触发', now); } // 页面加载完成后的初始化 document.addEventListener('DOMContentLoaded', function() { console.log('页面加载完成'); // 添加一些交互效果 const buttons = document.querySelectorAll('button'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.05)'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); }); });
⚙️
预览设置
自动运行
显示行号
启用控制台
👁️
实时预览
🔄 刷新
💾 导出HTML
🖥️
控制台输出
控制台输出将显示在这里...
🗑️ 清空控制台
📚
示例代码
基础表单
包含表单验证的示例
时钟应用
动态时钟显示
简单计算器
基础数学计算器