在线HTML/CSS/JS测试工具
实时编辑HTML、CSS和JavaScript代码并立即查看结果。非常适合快速测试代码片段和前端原型设计。
代码编辑器
HTML
CSS
JavaScript
<!DOCTYPE html> <html> <head> <title>我的页面</title> </head> <body> <h1>欢迎使用在线测试工具</h1> <p>编辑HTML、CSS和JavaScript代码并实时查看结果！</p> <div id="output"></div> </body> </html>
body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: white; text-align: center; padding: 50px; } h1 { font-size: 2.5rem; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } p { font-size: 1.2rem; max-width: 600px; margin: 0 auto 30px; }
document.addEventListener('DOMContentLoaded', function() { const output = document.getElementById('output'); output.innerHTML = '<button id="demo-btn">点击我!</button>'; document.getElementById('demo-btn').addEventListener('click', function() { alert('你好！当前测试代码运行正常！'); this.textContent = '已点击!'; this.style.background = '#4CAF50'; }); });
实时预览
运行代码
重置
保存为HTML
赞助商广告
Axing的Blgo，免费分享精品源码、3A单机大作、各种使用教程
立即注册获取