一天一苹果，苹果远离我
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 实时编辑器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background-color: #2c3e50;
color: white;
padding: 15px 20px;
text-align: center;
}
h1 {
font-size: 1.8rem;
margin-bottom: 5px;
}
.subtitle {
font-size: 0.9rem;
opacity: 0.8;
}
.editor-container {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
.editor-pane {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow: hidden;
}
.pane-header {
background-color: #34495e;
color: white;
padding: 8px 15px;
font-size: 0.9rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.editor {
flex: 1;
padding: 10px;
border: none;
resize: none;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 1.5;
background-color: #f8f8f8;
color: #333;
}
#html-editor {
height: 100%;
}
#css-editor {
height: 100%;
}
#js-editor {
height: 100%;
}
.preview-pane {
flex: 2;
min-width: 300px;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow: hidden;
}
.preview-header {
background-color: #16a085;
color: white;
padding: 8px 15px;
font-size: 0.9rem;
}
#preview-frame {
flex: 1;
border: none;
background-color: white;
}
.controls {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #ecf0f1;
border-top: 1px solid #ddd;
}
button {
padding: 8px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.run-btn {
background-color: #27ae60;
}
.run-btn:hover {
background-color: #219955;
}
.clear-btn {
background-color: #e74c3c;
}
.clear-btn:hover {
background-color: #c0392b;
}
.tab-buttons {
display: flex;
gap: 5px;
}
.tab-btn {
padding: 5px 10px;
background-color: #95a5a6;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.8rem;
}
.tab-btn.active {
background-color: #7f8c8d;
}
footer {
text-align: center;
padding: 10px;
background-color: #2c3e50;
color: white;
font-size: 0.8rem;
}
@media (max-width: 768px) {
.editor-container {
flex-direction: column;
}
.editor-pane, .preview-pane {
min-width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>HTML 实时编辑器</h1>
<p class="subtitle">输入HTML、CSS和JavaScript代码，实时预览效果</p>
</header>
<div class="editor-container">
<div class="editor-pane">
<div class="pane-header">
<span>代码编辑器</span>
<div class="tab-buttons">
<button class="tab-btn active" data-tab="html">HTML</button>
<button class="tab-btn" data-tab="css">CSS</button>
<button class="tab-btn" data-tab="js">JavaScript</button>
</div>
</div>
<textarea id="html-editor" class="editor" spellcheck="false" placeholder="输入HTML代码..."><!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎使用HTML实时编辑器</h1>
<p>这是一个可以实时预览HTML代码效果的工具。</p>
<button id="demo-btn">点击我</button>
<div id="output"></div>
</body>
</html></textarea>
<textarea id="css-editor" class="editor" spellcheck="false" placeholder="输入CSS代码..." style="display: none;">body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
#demo-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#demo-btn:hover {
background-color: #2980b9;
}</textarea>
<textarea id="js-editor" class="editor" spellcheck="false" placeholder="输入JavaScript代码..." style="display: none;">document.getElementById('demo-btn').addEventListener('click', function() {
const output = document.getElementById('output');
output.innerHTML = '按钮被点击了！当前时间: ' + new Date().toLocaleTimeString();
// 添加一些动画效果
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 100);
});</textarea>
</div>
<div class="preview-pane">
<div class="preview-header">实时预览</div>
<iframe id="preview-frame"></iframe>
</div>
</div>
<div class="controls">
<button class="clear-btn" id="clear-btn">清除所有代码</button>
<button class="run-btn" id="run-btn">运行代码</button>
</div>
<footer>
<p>© 2023 HTML实时编辑器 | 使用HTML、CSS和JavaScript构建</p>
</footer>
<script>
// 获取DOM元素
const htmlEditor = document.getElementById('html-editor');
const cssEditor = document.getElementById('css-editor');
const jsEditor = document.getElementById('js-editor');
const previewFrame = document.getElementById('preview-frame');
const runBtn = document.getElementById('run-btn');
const clearBtn = document.getElementById('clear-btn');
const tabButtons = document.querySelectorAll('.tab-btn');
// 当前活动的编辑器
let activeEditor = htmlEditor;
// 初始化预览
updatePreview();
// 运行代码按钮点击事件
runBtn.addEventListener('click', updatePreview);
// 清除代码按钮点击事件
clearBtn.addEventListener('click', () => {
if (confirm('确定要清除所有代码吗？')) {
htmlEditor.value = '';
cssEditor.value = '';
jsEditor.value = '';
updatePreview();
}
});
// 标签页切换
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// 移除所有活动标签的active类
tabButtons.forEach(btn => btn.classList.remove('active'));
// 添加当前标签的active类
button.classList.add('active');
// 隐藏所有编辑器
document.querySelectorAll('.editor').forEach(editor => {
editor.style.display = 'none';
});
// 显示选中的编辑器
const tab = button.getAttribute('data-tab');
activeEditor = document.getElementById(tab + '-editor');
activeEditor.style.display = 'block';
});
});
// 更新预览函数
function updatePreview() {
const html = htmlEditor.value;
const css = cssEditor.value;
const js = jsEditor.value;
// 创建完整的HTML文档
const fullHtml = `
<!DOCTYPE html>
<html>
<head>
<style>${css}</style>
</head>
<body>
${html}
<script>${js}<\/script>
</body>
</html>
`;
// 将HTML写入iframe
previewFrame.srcdoc = fullHtml;
}
// 自动更新预览（防抖处理）
let debounceTimer;
function debounceUpdate() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(updatePreview, 500);
}
// 为所有编辑器添加输入事件监听
htmlEditor.addEventListener('input', debounceUpdate);
cssEditor.addEventListener('input', debounceUpdate);
jsEditor.addEventListener('input', debounceUpdate);
</script>
</body>
</html>
0 条评论
目前还没有评论...
