HTML网页代码预览器源码
🎉 简介：
在这个数字化的时代，每个人都可能是下一个网页设计大师！但等等，你是不是还在为如何快速预览你的HTML代码而头疼？是不是还在为找不到一个简单、免费、离线的代码预览工具而烦恼？
别担心，你的救星来了——“HTML网页代码预览器-离线版”！这不仅仅是一个工具，它是你创意实现的加速器，是你代码世界的小小魔法师！
🔍 功能亮点：
实时预览：就像变魔术一样，你在左边的文本框里输入代码，右边的窗口就会立刻展示出网页的样子。是的，你没看错，就是那么快！
代码编辑器：我们为你准备了一个宽敞舒适的代码编辑区域，你可以在这里尽情挥洒你的创意，而且它还支持自动换行和代码高亮哦！
一键清空：灵感枯竭？代码写错了？没关系，轻轻一点“清空代码”按钮，一切从头开始，就像什么都没发生过一样。
代码格式化：代码写得乱七八糟？别担心，我们的“格式化代码”功能会帮你把代码整理得井井有条，让你的代码看起来更加专业。
全屏编辑：想要更专注地编写代码？点击“全屏编辑”，整个世界都为你的代码让路，让你沉浸在编程的世界里。
即时反馈：每当你操作成功或者遇到小问题，都会有一个可爱的“toast”弹窗来告诉你，就像有个小助手在旁边一样。
🛠 使用说明书：
打开工具：首先，你需要打开这个神奇的网页。
编写代码：在左侧的“代码编辑器”中，你可以开始编写你的HTML代码。
实时预览：当你在编辑器中输入代码时，右侧的“预览窗口”会实时显示你的网页效果。
清空代码：如果你想要重新开始，只需点击页脚的“清空代码”按钮。
格式化代码：点击“格式化代码”按钮，你的代码就会自动变得整洁有序。
全屏编辑：想要更大的编辑空间？点击“全屏编辑”，让你的代码编辑区域占据整个屏幕。
退出全屏：如果你想要退出全屏模式，只需再次点击“全屏编辑”或者使用浏览器的全屏退出功能。
🎨 解决痛点：
无需联网：不需要网络连接，随时随地，想编就编。
简单易用：界面简洁，功能直观，新手也能快速上手。
即时反馈：操作结果一目了然，错误提示即时显示，让你的编程之路更加顺畅。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>HTML网页代码预览器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
height: 100vh;
background-color: #f4f4f9;
}
header {
background-color: #6a1b9a;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
width: 100%;
z-index: 1000;
}
main {
display: flex;
width: 100%;
margin-top: 5em;
padding: 1em;
}
.code-editor {
width: 50%;
height: calc(100vh - 12em);
padding: 1em;
font-size: 16px;
resize: none;
overflow-y: auto;
tab-size: 4;
background-color: #fff;
border: 1px solid #ddd;
outline: none;
border-radius: 5px;
}
.preview-window {
width: 50%;
height: calc(100vh - 12em);
border: 1px solid #ddd;
background-color: #fff;
border-radius: 5px;
margin-left: 1em;
}
footer {
background-color: #6a1b9a;
color: white;
text-align: center;
padding: 0.5em 0;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 0 0.5em;
padding: 0.5em 1em;
cursor: pointer;
background-color: #ffab91;
border: none;
border-radius: 5px;
color: white;
}
button:hover {
background-color: #ef5350;
}
.toast {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 0.5em 1em;
border-radius: 5px;
z-index: 1001;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.design-by {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<header>
<h1>HTML网页代码预览器-离线版</h1>
</header>
<main>
<textarea id="codeEditor" placeholder="在此处编写您的HTML代码..."></textarea>
<iframe id="previewWindow"></iframe>
</main>
<footer>
<button aria-label="清空代码" onclick="clearCode()">清空代码</button>
<button aria-label="格式化代码" onclick="formatCode()">格式化代码</button>
<button aria-label="全屏编辑" onclick="toggleFullScreen()">全屏编辑</button>
</footer>
<div id="toast"></div>
<div>Design by Nong Wenlong</div>
<script>
(function() {
const codeEditor = document.getElementById('codeEditor');
const previewWindow = document.getElementById('previewWindow').contentDocument.body;
const toast = document.getElementById('toast');
function showToast(message) {
toast.textContent = message;
toast.style.opacity = 1;
setTimeout(() => {
toast.style.opacity = 0;
}, 3000);
}
function updatePreview() {
try {
previewWindow.innerHTML = codeEditor.value;
} catch (error) {
console.error("预览更新时出错:", error);
showToast("预览更新时出错，请检查代码！");
}
}
function clearCode() {
codeEditor.value = '';
updatePreview();
showToast("代码已清空！");
}
function formatCode() {
// 简单格式化：缩进和间距
const lines = codeEditor.value.split('\n').map(line => line.trim());
codeEditor.value = lines.join('\n');
updatePreview();
showToast("代码已格式化！");
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(`启用全屏模式时出错: ${err.message} (${err.name})`);
showToast("启用全屏模式时出错！");
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
codeEditor.addEventListener('input', () => {
updatePreview();
});
window.onload = () => {
updatePreview();
};
})();
</script>
</body>
</html
