如何用Html代码写一个硬核的html源码在线
如何用Html代码写一个硬核的html源码在线预览器。
实现了上下布局的代码编辑器和实时预览窗口，包含新窗口预览功能，采用现代化UI设计，支持代码保存为HTML文件
支持HTML、CSS和JS三部分单独编辑的实时预览编辑器实现，新窗口预览和代码下载功能，采用响应式网格布局和现代化UI设计
在线效果预览 https://www.hqyman.cn/tools/edithtml/index.html
图片预览：
开源源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html在线编辑预览器</title>
<style>
:root {
--primary: #4285f4;
--secondary: #34a853;
--danger: #ea4335;
--dark: #2d3748;
--light: #f7fafc;
}
body {
font-family: 'Segoe UI', system-ui;
margin: 0;
background: #f0f2f5;
color: #1a202c;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.editor-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.editor-panel {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.panel-header {
background: var(--dark);
color: white;
padding: 10px 15px;
display: flex;
justify-content: space-between;
}
.panel-title {
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.panel-title svg {
width: 18px;
height: 18px;
}
textarea.code-area {
width: 100%;
height: 300px;
padding: 15px;
border: none;
resize: none;
font-family: 'Fira Code', monospace;
font-size: 14px;
line-height: 1.6;
}
.preview-panel {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
iframe#preview {
width: 100%;
height: 400px;
border: none;
background: white;
}
.action-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.btn {
padding: 10px 20px;
border-radius: 6px;
border: none;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-secondary {
background: var(--secondary);
color: white;
}
.btn-danger {
background: var(--danger);
color: white;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div>
<header>
<h1>html在线编辑预览器</h1>
<p>独立编辑HTML、CSS和JavaScript，实时预览效果</p>
</header>
<div>
<div>
<div>
<div>
<svg viewBox="0 0 32 32"><path fill="currentColor" d="M4 4v24h24V4zm2 2h20v20H6zm2 2v4h4V8zm6 0v4h4V8zm6 0v4h4V8zM8 14v4h4v-4zm6 0v4h4v-4zm6 0v4h4v-4zM8 20v4h4v-4zm6 0v4h4v-4zm6 0v4h4v-4z"/></svg>
HTML
</div>
</div>
<textarea id="html-code" spellcheck="false">
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1欢迎使用html在线编辑预览器</h1>
<p>编辑左侧代码，实时查看下方效果</p>
<button id="demo-btn">点击我</button>
</body>
</html>
</textarea>
</div>
<div>
<div>
<div>
<svg viewBox="0 0 32 32"><path fill="currentColor" d="M5 5v22h22V5zm2 2h18v18H7zm2 2v14h14V9zm2 2h10v2H11zm0 4h10v2H11zm0 4h10v2H11z"/></svg>
CSS
</div>
</div>
<textarea id="css-code" spellcheck="false">
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #4285f4;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
#demo-btn {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
#demo-btn:hover {
background: #3367d6;
}
</textarea>
</div>
<div>
<div>
<div>
<svg viewBox="0 0 32 32"><path fill="currentColor" d="M4 4v24h24V4zm2 2h20v20H6zm2 2v4h4V8zm6 0v4h4V8zm6 0v4h4V8zM8 14v4h4v-4zm6 0v4h4v-4zm6 0v4h4v-4zM8 20v4h4v-4zm6 0v4h4v-4zm6 0v4h4v-4z"/></svg>
JavaScript
</div>
</div>
<textarea id="js-code" spellcheck="false">
document.getElementById('demo-btn').addEventListener('click', function() {
alert('按钮被点击了！');
this.textContent = '已点击';
});
</textarea>
</div>
</div>
<div>
<div>
<div>
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0z"/></svg>
实时预览
</div>
</div>
<iframe id="preview"></iframe>
</div>
<div>
<button id="new-window-btn" class="btn btn-secondary">在新窗口预览</button>
<button id="download-btn" class="btn btn-primary">下载完整代码</button>
<button id="reset-btn" class="btn btn-danger">重置代码</button>
</div>
</div>
<script>
// 获取DOM元素
const htmlEditor = document.getElementById('html-code');
const cssEditor = document.getElementById('css-code');
const jsEditor = document.getElementById('js-code');
const previewFrame = document.getElementById('preview');
const newWindowBtn = document.getElementById('new-window-btn');
const downloadBtn = document.getElementById('download-btn');
const resetBtn = document.getElementById('reset-btn');
// 生成完整HTML文档
function generateFullHtml() {
return `<!DOCTYPE html>
<html>
<head>
<title>生成的页面</title>
<style>${cssEditor.value}</style>
</head>
${htmlEditor.value.replace('<head>', '').replace('</head>', '')}
<script>${jsEditor.value}<\/script>
</html>`;
}
// 更新预览
function updatePreview() {
const fullHtml = generateFullHtml();
const previewDoc = previewFrame.contentWindow.document;
previewDoc.open();
previewDoc.write(fullHtml);
previewDoc.close();
}
// 在新窗口打开预览
function openInNewWindow() {
const newWindow = window.open('', '_blank');
newWindow.document.write(generateFullHtml());
newWindow.document.close();
}
// 下载代码
function downloadCode() {
const blob = new Blob([generateFullHtml()], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `code_${new Date().toISOString().slice(0,10)}.html`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// 重置代码
function resetCode() {
if(confirm('确定要重置所有代码吗？')) {
htmlEditor.value = `<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎使用html在线编辑预览器</h1>
<p>编辑左侧代码，实时查看下方效果</p>
<button id="demo-btn">点击我</button>
</body>
</html>`;
cssEditor.value = `body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #4285f4;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
#demo-btn {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
#demo-btn:hover {
background: #3367d6;
}`;
jsEditor.value = `document.getElementById('demo-btn').addEventListener('click', function() {
alert('按钮被点击了！');
this.textContent = '已点击';
});`;
updatePreview();
}
}
// 事件监听
htmlEditor.addEventListener('input', updatePreview);
cssEditor.addEventListener('input', updatePreview);
jsEditor.addEventListener('input', updatePreview);
newWindowBtn.addEventListener('click', openInNewWindow);
downloadBtn.addEventListener('click', downloadCode);
resetBtn.addEventListener('click', resetCode);
// 初始化预览
window.addEventListener('load', updatePreview);
</script>
</body>
</html>推荐本站淘宝优惠价购买喜欢的宝贝:
本文链接：https://www.hqyman.cn/post/11660.html 非本站原创文章欢迎转载，原创文章需保留本站地址！
微信支付宝扫一扫，打赏作者吧～休息一下~~
萌ICP备20248119号
