作为程序员，我们经常需要展示代码编写过程，无论是教学演示、
分享编程思路还是制作演示视频，都需要一种能够模拟人工书写代码的工具。今天我要向大家推荐一款我开发的 HTML 代码书写模拟器，它能帮你实现代码逐字或逐行输出的效果，让代码仿佛 “自己写出来” 一样。
工具介绍
这款 HTML 代码书写模拟器是一个纯前端工具，无需后端支持，直接在浏览器中运行。它的核心功能是接收 HTML 代码（通过直接输入或文件上传），然后模拟人工书写的效果将代码逐步展示出来。
主要特性
两种输出模式：
逐字输出：一个字符一个字符地展示，还原真实书写过程
逐行输出：一行一行地展示，适合需要快速展示完整代码结构的场景
灵活的速度控制：通过滑块可以自由调节输出速度，从快速到慢速满足不同需求
完整的控制功能：提供开始、暂停、继续和重置按钮，方便随时控制输出过程
全屏预览：支持全屏模式查看输出效果，提供更专注的展示体验
结果复制：输出完成后可以一键复制结果到剪贴板
使用场景
这款工具适用多种场景：
教学演示：在课堂或线上教学中，逐步展示代码编写过程
视频制作：录制编程教程时，用它来生成代码书写动画
博客文章：在技术文章中插入代码书写动图（可通过录屏实现）
代码评审：逐步展示代码，方便团队成员理解代码结构和逻辑
使用方法
打开工具后，在左侧输入区域输入 HTML 代码或上传 HTML 文件
选择输出模式（逐字或逐行）
通过滑块调整输出速度
点击 “开始输出” 按钮，在右侧预览区查看效果
如需全屏查看，点击预览区右上角的全屏按钮
输出完成后，可点击 “复制结果” 按钮将内容复制到剪贴板
源码
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
mono: ['Consolas', 'Monaco', 'Courier New', 'monospace']
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.typing-cursor {
border-right: 2px solid #3B82F6;
animation: blink 1s step-end infinite;
}
@keyframes blink {
from, to {
border-color: transparent }
50% {
border-color: #3B82F6 }
}
.code-block {
background-color: #1E293B;
color: #E2E8F0;
border-radius: 0.5rem;
overflow-x: auto;
}
.fullscreen-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.95);
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.fullscreen-overlay.active {
opacity: 1;
pointer-events: auto;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<header class="bg-gradient-to-r from-primary to-blue-700 text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow flex items-center">
<i class="fa fa-code mr-3"></i>HTML代码书写模拟器
</h1>
<p class="mt-2 opacity-90">支持逐字和逐行两种输出模式</p>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- 左侧：输入区域 -->
<div class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:shadow-lg">
<h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
<i class="fa fa-pencil-square-o mr-2 text-primary"></i>输入HTML代码
</h2>
<div class="mb-6">
<label for="htmlInput" class="block text-sm font-medium text-gray-700 mb-2">直接输入代码：</label>
<textarea id="htmlInput" rows="10" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all font-mono text-sm resize-none" placeholder="在这里粘贴HTML代码..."></textarea>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">或上传HTML文件：</label>
<div class="flex items-center">
<input type="file" id="fileUpload" accept=".html" class="hidden" />
<label for="fileUpload" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg border border-gray-300 cursor-pointer hover:bg-gray-200 transition-colors flex items-center">
<i class="fa fa-upload mr-2"></i>选择文件
</label>
<span id="fileName" class="ml-3 text-sm text-gray-500 truncate flex-1"></span>
</div>
</div>
<!-- 输出模式选择 -->© 版权声明
文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!
THE END
暂无评论内容