← 返回首页
HTML 在线预览
🌐
在线编写 HTML/CSS/JavaScript 代码并实时预览效果
HTML
CSS
JavaScript
<div class="container"> <h1>Hello World!</h1> <p>这是一个在线代码预览器</p> <button onclick="sayHello()">点击我</button> <p id="message"></p> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; padding: 40px; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; } .container { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); text-align: center; } h1 { color: #333; margin-bottom: 10px; } p { color: #666; margin-bottom: 20px; } button { padding: 12px 30px; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: transform 0.2s; } button:hover { transform: scale(1.05); } #message { margin-top: 20px; color: #667eea; font-weight: bold; }
function sayHello() { const message = document.getElementById('message'); message.textContent = '你好！当前时间: ' + new Date().toLocaleTimeString(); }
预览效果
▶ 运行