💻 在线代码沙盒

中文 English
← 返回工具站
HTML
CSS
JavaScript
📱 预览 就绪
实时预览 0 字符

📦 模板

Hello World

最简单的入门模板

卡片布局

CSS Flexbox卡片

CSS动画

关键帧动画效果

Canvas绘图

HTML5 Canvas示例

表单验证

JS表单验证逻辑

Fetch API

异步数据请求示例

📖 使用教程

快速开始

在线代码沙盒是一个无需安装的前端开发环境。打开页面即可编写HTML、CSS和JavaScript代码，实时查看运行效果。左侧编辑器分为三个标签页，分别对应HTML结构、CSS样式和JavaScript逻辑。点击"运行"按钮或开启自动运行模式，右侧预览区会即时呈现代码效果。

基本操作

在HTML标签页编写页面结构，在CSS标签页添加样式，在JavaScript标签页编写交互逻辑。支持Tab键缩进、Ctrl+Z撤销等常用快捷键。点击预览区上方的"预览"标题可以刷新预览。

模板功能

页面下方提供6个常用模板，点击即可加载预设代码。从Hello World入门模板到Canvas绘图、表单验证等进阶示例，帮助您快速上手各类前端开发场景。

🎯 应用场景

前端学习：初学者可以通过实时预览直观理解HTML/CSS/JS的运行机制，修改代码立即看到效果变化，比传统教程更高效。

快速原型：产品经理或设计师可以用它快速搭建页面原型，验证交互逻辑，无需配置本地开发环境。

教学演示：教师可以在课堂上实时编写代码，学生同步观看效果，提升教学互动性。分享代码只需截图或导出HTML文件。

代码调试：遇到前端Bug时，可以将问题代码粘贴到这里隔离测试，排除其他代码干扰，快速定位问题根源。

📚 扩展知识

前端三剑客：HTML负责页面结构（骨架），CSS负责视觉样式（皮肤），JavaScript负责交互行为（肌肉）。三者协同工作，构成现代Web页面的基础。

沙盒安全机制：预览使用iframe的sandbox属性隔离，限制了脚本的权限范围。即使编写了恶意代码，也只会影响预览区域，不会访问主页面的DOM或发起网络请求。

离线运行原理：所有代码解析和渲染都在浏览器本地完成，不依赖任何后端服务。页面加载后，即使断网也能正常使用全部功能。

❓ 常见问题

代码会上传到服务器吗？
不会。所有代码都在浏览器本地运行和预览，数据不会发送到任何服务器。关闭页面后代码不会保存，可放心使用。
支持哪些语言？
支持HTML、CSS和JavaScript三种前端语言。编辑器提供基础的语法高亮和自动缩进，适合快速编写和测试前端代码。
可以离线使用吗？
可以。页面加载完成后，所有功能均在本地运行，断网也能正常使用。
预览安全吗？
安全。预览使用iframe沙盒隔离，不会影响主页面。编写恶意代码只会影响预览区域，不会危害您的设备。
适合初学者学习前端吗？
非常适合。实时预览让您可以立即看到代码效果，是学习HTML/CSS/JS的最佳方式。修改代码后点击运行即可查看变化。

© 2026 在线小工具矩阵 · shexiangsheng@gmail.com

纯前端本地处理，数据不上传服务器

'; frame.srcdoc = doc; document.getElementById('previewStatus').textContent = '运行中...'; setTimeout(function(){document.getElementById('previewStatus').textContent = '就绪';},500); }; // Auto-run on input ['htmlCode','cssCode','jsCode'].forEach(function(id){ document.getElementById(id).addEventListener('input',function(){ updateCharCount(); if(autoRunEnabled){ clearTimeout(runTimer); runTimer = setTimeout(window.runCode,500); } }); }); // Char count function updateCharCount(){ var total = document.getElementById('htmlCode').value.length + document.getElementById('cssCode').value.length + document.getElementById('jsCode').value.length; document.getElementById('charCount').textContent = total+' 字符'; } updateCharCount(); // Tab key support ['htmlCode','cssCode','jsCode'].forEach(function(id){ document.getElementById(id).addEventListener('keydown',function(e){ if(e.key==='Tab'){ e.preventDefault(); var s=this.selectionStart, end=this.selectionEnd; this.value=this.value.substring(0,s)+' '+this.value.substring(end); this.selectionStart=this.selectionEnd=s+2; } }); }); // Copy code window.copyCode = function(){ var html = document.getElementById('htmlCode').value; var css = document.getElementById('cssCode').value; var js = document.getElementById('jsCode').value; var st = '<' + 'script>'; var et = '<' + '/script>'; var full = '\n\n\n\n\n\n\n'+html+'\n'+st+'\n'+js+'\n'+et+'\n
\n'; navigator.clipboard.writeText(full).then(function(){ alert('代码已复制到剪贴板！'); }); }; // Download code window.downloadCode = function(){ var html = document.getElementById('htmlCode').value; var css = document.getElementById('cssCode').value; var js = document.getElementById('jsCode').value; var st = '<' + 'script>'; var et = '<' + '/script>'; var full = '\n\n\n\n\n\n\n'+html+'\n'+st+'\n'+js+'\n'+et+'\n
\n'; var blob = new Blob([full],{type:'text/html'}); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'code.html'; a.click(); URL.revokeObjectURL(a.href); }; // Clear all window.clearAll = function(){ if(!confirm('确定要清空所有代码吗？')) return; document.getElementById('htmlCode').value=''; document.getElementById('cssCode').value=''; document.getElementById('jsCode').value=''; document.getElementById('previewFrame').srcdoc=''; updateCharCount(); }; // Templates var templates = { hello: { html: '
\n

Hello, World!

\n

这是我的第一个网页

\n \n

\n
', css: 'body {\n font-family: -apple-system, sans-serif;\n background: #0f172a;\n color: #e2e8f0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n}\n\n.container {\n text-align: center;\n padding: 40px;\n}\n\nh1 { color: #22d3ee; margin-bottom: 16px; }\np { color: #94a3b8; margin-bottom: 20px; }\n\nbutton {\n padding: 10px 24px;\n background: rgba(6,182,212,0.2);\n color: #22d3ee;\n border: 1px solid rgba(6,182,212,0.3);\n border-radius: 8px;\n font-size: 16px;\n cursor: pointer;\n}\n\nbutton:hover { background: rgba(6,182,212,0.3); }\n#output { margin-top: 16px; font-size: 18px; color: #4ade80; }', js: 'let count = 0;\ndocument.getElementById("clickBtn").addEventListener("click", function() {\n count++;\n document.getElementById("output").textContent = "你点击了 " + count + " 次！";\n});' }, card: { html: '
\n
🚀

快速部署

一键发布到生产环境

\n
🔒

安全可靠

企业级安全保障

\n
📊

实时监控

全面的数据分析面板

\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 800px; padding: 20px; }\n.card { background: #1e293b; border-radius: 12px; padding: 30px; text-align: center; border: 1px solid rgba(148,163,184,0.1); transition: transform 0.3s; }\n.card:hover { transform: translateY(-5px); border-color: rgba(6,182,212,0.3); }\n.card-icon { font-size: 2.5rem; margin-bottom: 16px; }\n.card h3 { color: #f1f5f9; margin-bottom: 8px; }\n.card p { color: #94a3b8; font-size: 0.9rem; }', js: '// 悬停效果增强\ndocument.querySelectorAll(".card").forEach(function(card) {\n card.addEventListener("mouseenter", function() {\n this.style.boxShadow = "0 8px 32px rgba(6,182,212,0.15)";\n });\n card.addEventListener("mouseleave", function() {\n this.style.boxShadow = "none";\n });\n});' }, animation: { html: '
\n
\n
\n
\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n.scene { position: relative; width: 400px; height: 300px; }\n\n.box {\n position: absolute; width: 60px; height: 60px; background: #22d3ee; border-radius: 8px;\n animation: moveBox 3s ease-in-out infinite;\n}\n.circle {\n position: absolute; width: 40px; height: 40px; background: #f97316; border-radius: 50%;\n animation: moveCircle 4s linear infinite;\n}\n.triangle {\n position: absolute; width: 0; height: 0;\n border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 43px solid #a855f7;\n animation: spin 2s linear infinite;\n}\n\n@keyframes moveBox { 0%,100% { left: 0; top: 120px; } 50% { left: 340px; top: 120px; } }\n@keyframes moveCircle { 0% { left: 180px; top: 0; } 25% { left: 340px; top: 120px; } 50% { left: 180px; top: 240px; } 75% { left: 0; top: 120px; } 100% { left: 180px; top: 0; } }\n@keyframes spin { from { left: 175px; top: 130px; transform: rotate(0deg); } to { left: 175px; top: 130px; transform: rotate(360deg); } }', js: '// 点击暂停/播放动画\nvar paused = false;\ndocument.querySelector(".scene").addEventListener("click", function() {\n paused = !paused;\n var items = document.querySelectorAll(".box, .circle, .triangle");\n items.forEach(function(el) {\n el.style.animationPlayState = paused ? "paused" : "running";\n });\n});' }, canvas: { html: '\n

点击画布添加粒子

', css: 'body { background: #0f172a; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\ncanvas { background: #1e293b; border-radius: 12px; border: 1px solid rgba(148,163,184,0.1); cursor: crosshair; }\n.hint { color: #64748b; margin-top: 12px; font-size: 0.9rem; }', js: 'var canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\nvar particles = [];\n\nfunction Particle(x, y) {\n this.x = x; this.y = y;\n this.vx = (Math.random() - 0.5) * 8;\n this.vy = (Math.random() - 0.5) * 8;\n this.life = 1;\n this.color = "hsl(" + Math.random()*360 + ", 80%, 60%)";\n this.size = Math.random() * 6 + 2;\n}\n\ncanvas.addEventListener("click", function(e) {\n var rect = canvas.getBoundingClientRect();\n for (var i = 0; i < 20; i++) {\n particles.push(new Particle(e.clientX - rect.left, e.clientY - rect.top));\n }\n});\n\nfunction animate() {\n ctx.fillStyle = "rgba(15,23,42,0.15)";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n particles.forEach(function(p, i) {\n p.x += p.vx; p.y += p.vy; p.life -= 0.015;\n if (p.life <= 0) { particles.splice(i, 1); return; }\n ctx.globalAlpha = p.life;\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fill();\n });\n ctx.globalAlpha = 1;\n requestAnimationFrame(animate);\n}\nanimate();' }, form: { html: '
\n

用户注册

\n
\n
\n
\n
\n \n
\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n#myForm { background: #1e293b; padding: 32px; border-radius: 12px; width: 360px; border: 1px solid rgba(148,163,184,0.1); }\nh2 { color: #f1f5f9; text-align: center; margin-bottom: 24px; }\n.field { margin-bottom: 16px; }\nlabel { display: block; color: #94a3b8; margin-bottom: 6px; font-size: 0.9rem; }\ninput { width: 100%; padding: 10px 12px; background: #0f172a; border: 1px solid rgba(148,163,184,0.2); border-radius: 6px; color: #e2e8f0; font-size: 14px; }\ninput:focus { outline: none; border-color: rgba(6,182,212,0.5); }\ninput.error { border-color: #ef4444; }\nbutton { width: 100%; padding: 12px; background: rgba(6,182,212,0.2); color: #22d3ee; border: 1px solid rgba(6,182,212,0.3); border-radius: 6px; font-size: 16px; cursor: pointer; margin-top: 8px; }\nbutton:hover { background: rgba(6,182,212,0.3); }\n#msg { margin-top: 12px; text-align: center; font-size: 0.9rem; min-height: 24px; }\n.success { color: #4ade80; }\n.fail { color: #f87171; }', js: 'document.getElementById("myForm").addEventListener("submit", function(e) {\n e.preventDefault();\n var username = document.getElementById("username").value.trim();\n var email = document.getElementById("email").value.trim();\n var password = document.getElementById("password").value;\n var confirmPwd = document.getElementById("confirmPwd").value;\n var msg = document.getElementById("msg");\n var valid = true;\n\n // 清除之前的错误状态\n document.querySelectorAll("input").forEach(function(el) { el.classList.remove("error"); });\n\n if (username.length < 3 || username.length > 20) {\n document.getElementById("username").classList.add("error");\n valid = false;\n }\n if (!email || !email.includes("@")) {\n document.getElementById("email").classList.add("error");\n valid = false;\n }\n if (password.length < 6) {\n document.getElementById("password").classList.add("error");\n valid = false;\n }\n if (password !== confirmPwd) {\n document.getElementById("confirmPwd").classList.add("error");\n valid = false;\n }\n\n if (valid) {\n msg.className = "success";\n msg.textContent = "注册成功！欢迎 " + username;\n } else {\n msg.className = "fail";\n msg.textContent = "请检查输入内容";\n }\n});' }, api: { html: '
\n

用户列表

\n \n \n
\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; padding: 40px; margin: 0; font-family: sans-serif; }\n.container { max-width: 500px; width: 100%; }\nh2 { color: #f1f5f9; margin-bottom: 16px; }\nbutton { padding: 10px 20px; background: rgba(6,182,212,0.2); color: #22d3ee; border: 1px solid rgba(6,182,212,0.3); border-radius: 6px; cursor: pointer; margin-bottom: 16px; }\nbutton:hover { background: rgba(6,182,212,0.3); }\n.user-card { background: #1e293b; padding: 16px; border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(148,163,184,0.1); }\n.user-card h4 { color: #22d3ee; margin-bottom: 4px; }\n.user-card p { color: #94a3b8; font-size: 0.85rem; margin: 2px 0; }', js: 'document.getElementById("fetchBtn").addEventListener("click", function() {\n var loading = document.getElementById("loading");\n var result = document.getElementById("result");\n loading.style.display = "block";\n result.innerHTML = "";\n\n // 使用免费API获取用户数据\n fetch("https://jsonplaceholder.typicode.com/users")\n .then(function(res) { return res.json(); })\n .then(function(users) {\n loading.style.display = "none";\n users.forEach(function(user) {\n result.innerHTML += \'

\' + user.name + \'

📧 \' + user.email + \'

🏢 \' + user.company.name + \'

\';\n });\n })\n .catch(function(err) {\n loading.style.display = "none";\n result.innerHTML = \'

请求失败: \' + err.message + \'

\';\n });\n});' } }; window.loadTemplate = function(name){ var t = templates[name]; if(!t) return; document.getElementById('htmlCode').value = t.html; document.getElementById('cssCode').value = t.css; document.getElementById('jsCode').value = t.js; updateCharCount(); window.runCode(); }; // Resize handle var handle = document.getElementById('resizeHandle'); var editorPanel = document.getElementById('editorPanel'); var isDragging = false; handle.addEventListener('mousedown',function(e){ isDragging=true; document.body.style.cursor='col-resize'; document.body.style.userSelect='none'; }); document.addEventListener('mousemove',function(e){ if(!isDragging) return; var playground=document.getElementById('playground'); var rect=playground.getBoundingClientRect(); var pct=((e.clientX-rect.left)/rect.width)*100; pct=Math.max(20,Math.min(80,pct)); editorPanel.style.flex='0 0 '+pct+'%'; }); document.addEventListener('mouseup',function(){ isDragging=false; document.body.style.cursor=''; document.body.style.userSelect=''; }); // Initial run window.runCode(); })();