在线HTML/JS运行器
编写、运行并分享您的HTML、CSS和JavaScript代码
使用说明
在左侧编辑器中编写HTML、CSS和JavaScript代码
点击"运行"按钮或使用快捷键Ctrl+Enter查看结果
使用"保存代码"将您的代码保存到浏览器本地存储
使用"加载代码"从本地存储恢复您之前保存的代码
使用"清空代码"重置所有编辑器内容
代码编辑器
运行 (Ctrl+Enter)
保存代码
加载代码
清空代码
HTML
CSS
JavaScript
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎使用在线HTML/JS运行器</h1> <p>这是一个简单的示例页面。</p> <div id="demo"></div> </body> </html>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f0f8ff; } h1 { color: #4a6cf7; } p { color: #333; line-height: 1.6; } #demo { margin-top: 20px; padding: 15px; background-color: #e6f7ff; border-radius: 5px; }
// 这是一个简单的JavaScript示例 document.getElementById('demo').innerHTML = '<h3>动态内容</h3>' + '<p>这段内容是通过JavaScript动态添加的。</p>' + '<button onclick="showMessage()">点击我</button>'; function showMessage() { alert('你好！这是一个JavaScript交互示例。'); } // 添加当前时间显示 setInterval(function() { const timeElement = document.getElementById('time'); if (!timeElement) { const demoDiv = document.getElementById('demo'); demoDiv.innerHTML += '<p id="time"></p>'; } document.getElementById('time').textContent = '当前时间: ' + new Date().toLocaleTimeString(); }, 1000);
预览结果
全屏预览
代码已保存！