VIP
加入QQ群
关注微信公众号
联系我们
请求更新
在這個數位化的時代，每個人都可能是下一個網頁設計大師！ 但等等，你是不是還在為如何快速預覽你的HTML代碼而頭疼？ 是不是還在為找不到一個簡單、免費、離線的代碼預覽工具而煩惱？ 別擔心，你的救星來了——“HTML網頁代碼預覽器-離線版”！ 這不僅僅是一個工具，它是你創意實現的加速器，是你代碼世界的小小魔法師！
功能亮點
實時預覽：就像變魔術一樣，你在左邊的文本框里輸入代碼，右邊的視窗就會立刻展示出網頁的樣子。 是的，你沒看錯，就是那麼快！
代碼編輯器：我們為你準備了一個寬敞舒適的代碼編輯區域，你可以在這裡盡情揮灑你的創意，而且它還支持自動換行和代碼高亮哦！
一鍵清空：靈感枯竭？ 代碼寫錯了？ 沒關係，輕輕一點“清空代碼”按鈕，一切從頭開始，就像什麼都沒發生過一樣。
代碼格式化：代碼寫得亂七八糟？ 別擔心，我們的“格式化代碼”功能會幫你把代碼整理得井井有條，讓你的代碼看起來更加專業。
全屏編輯：想要更專注地編寫代碼？ 點擊「全屏編輯」，整個世界都為你的代碼讓路，讓你沉浸在程式設計的世界裏。
即時反饋：每當你操作成功或者遇到小問題，都會有一個可愛的“toast”彈窗來告訴你，就像有個小助手在旁邊一樣。
使用說明書
打開工具：首先，你需要打開這個神奇的網頁。
編寫代碼：在左側的“代碼編輯器”中，你可以開始編寫你的HTML代碼。
即時預覽：當你在編輯器中輸入代碼時，右側的「預覽視窗」 會實時顯示你的網頁效果。
清空代碼：如果你想要重新開始，只需點擊頁腳的“清空代碼”按鈕。
格式化代碼：點擊「格式化代碼」按鈕，你的代碼就會自動變得整潔有序。
全屏編輯：想要更大的編輯空間？ 點擊「全屏編輯」，讓你的代碼編輯區域佔據整個螢幕。
退出全屏：如果你想要退出全屏模式，只需再次點擊「全屏編輯」或者使用瀏覽器的全屏退出功能。
解決痛點
無需聯網：不需要網路連接，隨時隨地，想編就編。
簡單易用：介面簡潔，功能直觀，新手也能快速上手。
即時反饋：操作結果一目了然，錯誤提示即時顯示，讓你的程式設計之路更加順暢。
源碼
<!DOCTYPE html>
<html lang="zh-CN">
<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" class="code-editor" placeholder="在此處編寫您的HTML代碼..."></textarea>
<iframe id="previewWindow" class="preview-window"></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" class="toast"></div>
<div class="design-by">Design by AngelaL</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>運行效果
網站網址
文章標題：HTML 網頁代碼預覽器-離線版
本文鏈接：https://angelal.cc/1392.html
文章版權：除非特別註明，否則均為AngelaL的原創文章，轉載必須以鏈接形式標明本文鏈接
本文最後更新發佈於：2025年03月01日 11:10, 某些文章具有時效性,若有錯誤或已失效,請在下方留言。
