免费开源-“HTML网页代码预览器-离线版”

peter5258 · 发表于 2024-11-21 21:15

🚀 欢迎来到“HTML网页代码预览器-离线版”的奇妙世界！ 🌐

🎉 简介：
在这个数字化的时代，每个人都可能是下一个网页设计大师！但等等，你是不是还在为如何快速预览你的HTML代码而头疼？是不是还在为找不到一个简单、免费、离线的代码预览工具而烦恼？别担心，你的救星来了——“HTML网页代码预览器-离线版”！这不仅仅是一个工具，它是你创意实现的加速器，是你代码世界的小小魔法师！

🔍 功能亮点：

实时预览：就像变魔术一样，你在左边的文本框里输入代码，右边的窗口就会立刻展示出网页的样子。是的，你没看错，就是那么快！
代码编辑器：我们为你准备了一个宽敞舒适的代码编辑区域，你可以在这里尽情挥洒你的创意，而且它还支持自动换行和代码高亮哦！
一键清空：灵感枯竭？代码写错了？没关系，轻轻一点“清空代码”按钮，一切从头开始，就像什么都没发生过一样。
代码格式化：代码写得乱七八糟？别担心，我们的“格式化代码”功能会帮你把代码整理得井井有条，让你的代码看起来更加专业。
全屏编辑：想要更专注地编写代码？点击“全屏编辑”，整个世界都为你的代码让路，让你沉浸在编程的世界里。
即时反馈：每当你操作成功或者遇到小问题，都会有一个可爱的“toast”弹窗来告诉你，就像有个小助手在旁边一样。

🛠 使用说明书：

打开工具：首先，你需要打开这个神奇的网页。
编写代码：在左侧的“代码编辑器”中，你可以开始编写你的HTML代码。
实时预览：当你在编辑器中输入代码时，右侧的“预览窗口”会实时显示你的网页效果。
清空代码：如果你想要重新开始，只需点击页脚的“清空代码”按钮。
格式化代码：点击“格式化代码”按钮，你的代码就会自动变得整洁有序。
全屏编辑：想要更大的编辑空间？点击“全屏编辑”，让你的代码编辑区域占据整个屏幕。
退出全屏：如果你想要退出全屏模式，只需再次点击“全屏编辑”或者使用浏览器的全屏退出功能。

🎨 解决痛点：

无需联网：不需要网络连接，随时随地，想编就编。
简单易用：界面简洁，功能直观，新手也能快速上手。
即时反馈：操作结果一目了然，错误提示即时显示，让你的编程之路更加顺畅。

HTML网页代码预览器-离线版.zip (1.92 KB, 下载次数: 272)

🌟 结语：
“HTML网页代码预览器-离线版”是你的创意伙伴，是你的编程助手。无论你是编程新手还是资深开发者，这个小工具都能为你的代码之旅增添乐趣和效率。快来试试吧，让我们一起在这个数字世界里，编织出属于我们的精彩网页！🚀🌈

{:300_965:}
欢迎各位大佬，撒开了拍砖！！感谢感谢！！

[HTML] 纯文本查看 复制代码

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

<!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 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>

top777 · 发表于 2024-11-22 08:53

只有一层套娃的世界......

skzhaixing · 发表于 2024-11-22 10:29

本帖最后由 skzhaixing 于 2024-11-22 10:42 编辑

下面的三个按钮是摆设吧点击后没反应需要重新在 JavaScript 中获取按钮元素并绑定事件，通过 querySelector 方法根据按钮的 aria-label 属性获取到对应的按钮元素，然后分别为它们绑定相应的点击事件处理函数。就OK啦

zhangt0713 · 发表于 2024-11-21 23:29

感谢分享，能再分享一个网页制作神器?主要用作网口测试呢

lqinyli · 发表于 2024-11-21 23:32

谁能给个源码压缩包

wonder2018 · 发表于 2024-11-21 23:50

lqinyli 发表于 2024-11-21 23:32
谁能给个源码压缩包

直接复制帖子里面的代码，保存为 .html 文件就好了。

52PJ070 · 发表于 2024-11-22 00:00

这个用来作测试挺方便的，感谢楼主创作并分享！

Lanthanum · 发表于 2024-11-22 00:06

感谢分享

ltgb · 发表于 2024-11-22 00:17

手机上想快速预览可以用浏览器

gml857 · 发表于 2024-11-22 00:21

好用的工具，感谢楼主

nanometer1 · 发表于 2024-11-22 07:47

感谢无私分享

hc6125322 · 发表于 2024-11-22 07:58

这是个好东西，谢谢啦

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 免费开源-“HTML网页代码预览器-离线版”

免费评分

本帖被以下淘专辑推荐: