开发文本大小写转换器，结合 MCP Server 自动部署
【摘要】 在日常编码、写作、编辑资料或处理表格内容的过程中，我们经常会遇到一个非常常见但又容易被忽略的问题——文本的大小写格式不统一。有时候我们从网页上复制一段文字，有的是全大写、有的是全小写，还有些是首字母大小写混乱，看起来非常杂乱，不仅影响阅读，也不利于后续的排版与展示。而如果手动一个个修改，不仅枯燥，还容易出错。为了处理这种琐碎但常见的需求，我们专门设计了一个小巧实用的工具：文本大小写转换器。它...
在日常编码、写作、编辑资料或处理表格内容的过程中，我们经常会遇到一个非常常见但又容易被忽略的问题——文本的大小写格式不统一。有时候我们从网页上复制一段文字，有的是全大写、有的是全小写，还有些是首字母大小写混乱，看起来非常杂乱，不仅影响阅读，也不利于后续的排版与展示。而如果手动一个个修改，不仅枯燥，还容易出错。
为了处理这种琐碎但常见的需求，我们专门设计了一个小巧实用的工具：文本大小写转换器。它的目标很简单——一键转换文本大小写格式，让所有操作变得轻松、便捷、高效。
功能介绍：三种转换，一键搞定
这个工具的核心功能其实非常直白，正因为它专注、聚焦，所以用起来也格外顺手。目前支持的三种常用转换方式如下：
1. 全小写转换（lowercase）
将所有文本中的字母统一转换为小写格式，适用于需要统一命名风格（如变量名、文件名等）的场景。无论你粘贴进来的是大写、小写还是混合格式，一键点击后，所有英文字母都会变成小写，清爽整洁。
除了这三种主要模式，后续还可以拓展一些实用子功能，比如“句子首字母大写”、“驼峰命名法（camelCase）”、“蛇形命名（snake_case）”等，甚至根据语言环境智能判断格式要求，适应多种使用场景。
与 CodeBuddy 的中文交互指令
为了进一步提升体验，我们还为这项功能配套了中文指令，让你在使用 CodeBuddy 时可以像聊天一样进行交互，快速执行转换操作。以下是几条常用的中文指令示例：
使用HTML和JS实现文本大小写转换器：支持全小写、全大写、首字母大写等一键转换。
CodeBuddy 在接收到这些自然语言指令后，会自动识别要操作的文本段，并执行相应的转换操作。
使用 EdgeOne Pages MCP 发布
因为我们的智能体中使用了 EdgeOne Pages MCP，生成工具后，会通过MCP实现自动部署；
当前端开发完成后，智能体就是将应用部署到一个公开的域名上，方便用户访问。腾讯云提供了一个非常方便的工具——EdgeOne Pages，它允许我们将 页面轻松发布并生成一个公开的 URL 地址。
-
将 项目通过 EdgeOne Pages 部署，几秒钟内就能获得一个公开的链接。
-
使用生成的链接，访问我们的页面，查看实际效果。
通过这个过程，用户就能够轻松 使用，并通过公开的链接访问。别让格式拖慢你的效率
虽然文本大小写看似是个不起眼的小问题，但实际工作中处理这类琐碎内容往往最消耗精力。通过 Trae 提供的“文本大小写转换器”，你可以用最简单的方式，快速实现文字格式的统一与规范，让注意力真正集中在内容本身、而不是格式上。
这种小工具，不一定花哨，但用起来舒服。它既适合写文案的你，也适合整理表格的你，更适合写代码的你。你会发现，把一件小事做到极致，本身就是一种高效的体现。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能文本大小写转换器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
position: relative;
overflow-x: hidden;
}
/* 动态背景粒子 */
.bg-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 30px;
text-align: center;
position: relative;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.header p {
font-size: 1.1em;
opacity: 0.9;
}
.main-content {
padding: 40px;
}
.conversion-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
.input-section, .output-section {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.section-title {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 15px;
color: #333;
display: flex;
align-items: center;
gap: 10px;
}
.textarea {
width: 100%;
height: 300px;
border: 2px solid #ddd;
border-radius: 10px;
padding: 15px;
font-size: 16px;
font-family: 'Courier New', monospace;
resize: vertical;
transition: border-color 0.3s ease;
background: white;
}
.textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.2);
}
.controls-panel {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.conversion-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.convert-btn {
padding: 15px 20px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.convert-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.convert-btn:active {
transform: translateY(0);
}
.convert-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.convert-btn:hover::before {
left: 100%;
}
.special-functions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.special-btn {
padding: 12px 18px;
border: 2px solid #667eea;
border-radius: 8px;
background: transparent;
color: #667eea;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.special-btn:hover {
background: #667eea;
color: white;
transform: scale(1.05);
}
.stats-panel {
background: #e9ecef;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.stat-item {
text-align: center;
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stat-number {
font-size: 2em;
font-weight: bold;
color: #667eea;
display: block;
}
.stat-label {
font-size: 0.9em;
color: #666;
margin-top: 5px;
}
.utility-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.utility-btn {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 25px;
background: white;
color: #666;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.utility-btn:hover {
background: #667eea;
color: white;
border-color: #667eea;
}
.history-panel {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
max-height: 300px;
overflow-y: auto;
}
.history-item {
background: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid #667eea;
}
.history-item:hover {
transform: translateX(5px);
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.history-type {
font-weight: bold;
color: #667eea;
font-size: 0.9em;
}
.history-text {
margin-top: 5px;
color: #666;
font-size: 0.9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-mode {
background: #e3f2fd;
border: 2px dashed #2196f3;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
}
.preview-text {
font-size: 1.2em;
color: #1976d2;
font-weight: bold;
}
.toast {
position: fixed;
top: 20px;
right: 20px;
background: #4caf50;
color: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 1000;
}
.toast.show {
transform: translateX(0);
}
@media (max-width: 768px) {
.conversion-area {
grid-template-columns: 1fr;
gap: 20px;
}
.main-content {
padding: 20px;
}
.header h1 {
font-size: 2em;
}
.conversion-buttons {
grid-template-columns: 1fr;
}
}
/* 自定义滚动条 */
.history-panel::-webkit-scrollbar {
width: 6px;
}
.history-panel::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.history-panel::-webkit-scrollbar-thumb {
background: #667eea;
border-radius: 3px;
}
.character-count {
font-size: 0.9em;
color: #666;
margin-top: 10px;
text-align: right;
}
.mode-indicator {
display: inline-block;
padding: 4px 8px;
background: #667eea;
color: white;
border-radius: 4px;
font-size: 0.8em;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="bg-particles" id="particles"></div>
<div class="container">
<div class="header">
<h1>🔄 智能文本大小写转换器</h1>
<p>支持多种转换模式，智能识别，一键转换文本格式</p>
</div>
<div class="main-content">
<div class="conversion-area">
<div class="input-section">
<div class="section-title">
📝 输入文本
<span class="mode-indicator" id="modeIndicator">实时模式</span>
</div>
<textarea
id="inputText"
class="textarea"
placeholder="在此输入需要转换的文本...支持中英文混排处理"
oninput="handleInput()"
onpaste="handlePaste()"
></textarea>
<div class="character-count" id="inputCount">字符数: 0</div>
</div>
<div class="output-section">
<div class="section-title">
✨ 转换结果
<button class="utility-btn" onclick="copyOutput()" style="margin-left: auto;">
📋 复制结果
</button>
</div>
<textarea
id="outputText"
class="textarea"
readonly
placeholder="转换结果将在此显示..."
></textarea>
<div class="character-count" id="outputCount">字符数: 0</div>
</div>
</div>
<div class="controls-panel">
<div class="section-title">🛠️ 转换操作</div>
<div class="conversion-buttons">
<button class="convert-btn" onclick="convertCase('lowercase')" title="将所有字母转为小写">
🔤 全小写 (lowercase)
</button>
<button class="convert-btn" onclick="convertCase('uppercase')" title="将所有字母转为大写">
🔠 全大写 (UPPERCASE)
</button>
<button class="convert-btn" onclick="convertCase('capitalize')" title="每个单词首字母大写">
🎯 首字母大写 (Capitalize)
</button>
<button class="convert-btn" onclick="convertCase('sentence')" title="句子首字母大写">
📝 句式大写 (Sentence case)
</button>
<button class="convert-btn" onclick="convertCase('camelcase')" title="驼峰命名法">
🐫 驼峰式 (camelCase)
</button>
<button class="convert-btn" onclick="convertCase('pascalcase')" title="帕斯卡命名法">
🏛️ 帕斯卡式 (PascalCase)
</button>
<button class="convert-btn" onclick="convertCase('snakecase')" title="下划线命名法">
🐍 蛇形式 (snake_case)
</button>
<button class="convert-btn" onclick="convertCase('kebabcase')" title="短横线命名法">
🍢 烤串式 (kebab-case)
</button>
</div>
<div class="special-functions">
<button class="special-btn" onclick="convertCase('inverse')" title="大小写反转">
🔄 大小写反转
</button>
<button class="special-btn" onclick="convertCase('alternating')" title="交替大小写">
🎪 交替大小写
</button>
<button class="special-btn" onclick="convertCase('random')" title="随机大小写">
🎲 随机大小写
</button>
<button class="special-btn" onclick="removeSpaces()" title="移除所有空格">
🚫 移除空格
</button>
<button class="special-btn" onclick="removeExtraSpaces()" title="移除多余空格">
✂️ 清理空格
</button>
<button class="special-btn" onclick="addSpaces()" title="在每个字符间添加空格">
➕ 添加空格
</button>
</div>
</div>
<div class="stats-panel">
<div class="section-title">📊 文本统计</div>
<div class="stats-grid">
<div class="stat-item">
<span class="stat-number" id="charCount">0</span>
<div class="stat-label">总字符数</div>
</div>
<div class="stat-item">
<span class="stat-number" id="wordCount">0</span>
<div class="stat-label">单词数</div>
</div>
<div class="stat-item">
<span class="stat-number" id="lineCount">0</span>
<div class="stat-label">行数</div>
</div>
<div class="stat-item">
<span class="stat-number" id="upperCount">0</span>
<div class="stat-label">大写字母</div>
</div>
<div class="stat-item">
<span class="stat-number" id="lowerCount">0</span>
<div class="stat-label">小写字母</div>
</div>
<div class="stat-item">
<span class="stat-number" id="numberCount">0</span>
<div class="stat-label">数字</div>
</div>
</div>
</div>
<div class="utility-buttons">
<button class="utility-btn" onclick="clearAll()">🗑️ 清空所有</button>
<button class="utility-btn" onclick="swapTexts()">🔄 交换文本</button>
<button class="utility-btn" onclick="togglePreviewMode()">👁️ 预览模式</button>
<button class="utility-btn" onclick="downloadResult()">💾 下载结果</button>
<button class="utility-btn" onclick="toggleRealTimeMode()">⚡ 实时转换</button>
<button class="utility-btn" onclick="showHelp()">❓ 使用帮助</button>
</div>
<div class="history-panel">
<div class="section-title">📚 转换历史</div>
<div id="historyContainer">
<div style="text-align: center; color: #999; padding: 20px;">
暂无转换历史
</div>
</div>
</div>
</div>
</div>
<div id="toast" class="toast"></div>
<script>
// 全局变量
let isRealTimeMode = true;
let isPreviewMode = false;
let conversionHistory = [];
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createParticles();
loadHistory();
updateStats();
});
// 创建背景粒子
function createParticles() {
const container = document.getElementById('particles');
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 8 + 3;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 6 + 's';
particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
container.appendChild(particle);
}
}
// 输入处理
function handleInput() {
updateStats();
updateCharacterCount();
if (isRealTimeMode) {
// 在实时模式下，延迟执行转换以避免频繁操作
clearTimeout(window.inputTimeout);
window.inputTimeout = setTimeout(() => {
const lastConversion = localStorage.getItem('lastConversion');
if (lastConversion) {
convertCase(lastConversion);
}
}, 300);
}
}
// 粘贴处理
function handlePaste() {
setTimeout(() => {
handleInput();
showToast('文本已粘贴');
}, 100);
}
// 大小写转换核心函数
function convertCase(type) {
const input = document.getElementById('inputText').value;
if (!input.trim()) {
showToast('请先输入文本', 'warning');
return;
}
let result = '';
switch (type) {
case 'lowercase':
result = input.toLowerCase();
break;
case 'uppercase':
result = input.toUpperCase();
break;
case 'capitalize':
result = input.replace(/\b\w+/g, word =>
word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
);
break;
case 'sentence':
result = input.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, match =>
match.toUpperCase()
);
break;
case 'camelcase':
result = input.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) =>
index === 0 ? word.toLowerCase() : word.toUpperCase()
).replace(/\s+/g, '');
break;
case 'pascalcase':
result = input.replace(/(?:^\w|[A-Z]|\b\w)/g, word =>
word.toUpperCase()
).replace(/\s+/g, '');
break;
case 'snakecase':
result = input.toLowerCase().replace(/\s+/g, '_');
break;
case 'kebabcase':
result = input.toLowerCase().replace(/\s+/g, '-');
break;
case 'inverse':
result = input.split('').map(char =>
char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase()
).join('');
break;
case 'alternating':
result = input.split('').map((char, index) =>
index % 2 === 0 ? char.toLowerCase() : char.toUpperCase()
).join('');
break;
case 'random':
result = input.split('').map(char =>
Math.random() > 0.5 ? char.toUpperCase() : char.toLowerCase()
).join('');
break;
default:
result = input;
}
document.getElementById('outputText').value = result;
updateCharacterCount();
addToHistory(type, input, result);
localStorage.setItem('lastConversion', type);
showToast(`已转换为${getConversionName(type)}`);
}
// 特殊功能
function removeSpaces() {
const input = document.getElementById('inputText').value;
const result = input.replace(/\s/g, '');
document.getElementById('outputText').value = result;
updateCharacterCount();
showToast('已移除所有空格');
}
function removeExtraSpaces() {
const input = document.getElementById('inputText').value;
const result = input.replace(/\s+/g, ' ').trim();
document.getElementById('outputText').value = result;
updateCharacterCount();
showToast('已清理多余空格');
}
function addSpaces() {
const input = document.getElementById('inputText').value;
const result = input.split('').join(' ');
document.getElementById('outputText').value = result;
updateCharacterCount();
showToast('已在字符间添加空格');
}
// 工具函数
function getConversionName(type) {
const names = {
'lowercase': '全小写',
'uppercase': '全大写',
'capitalize': '首字母大写',
'sentence': '句式大写',
'camelcase': '驼峰式',
'pascalcase': '帕斯卡式',
'snakecase': '蛇形式',
'kebabcase': '烤串式',
'inverse': '大小写反转',
'alternating': '交替大小写',
'random': '随机大小写'
};
return names[type] || type;
}
// 更新统计信息
function updateStats() {
const text = document.getElementById('inputText').value;
document.getElementById('charCount').textContent = text.length;
document.getElementById('wordCount').textContent = text.trim() ? text.trim().split(/\s+/).length : 0;
document.getElementById('lineCount').textContent = text ? text.split('\n').length : 0;
document.getElementById('upperCount').textContent = (text.match(/[A-Z]/g) || []).length;
document.getElementById('lowerCount').textContent = (text.match(/[a-z]/g) || []).length;
document.getElementById('numberCount').textContent = (text.match(/[0-9]/g) || []).length;
}
// 更新字符计数
function updateCharacterCount() {
const input = document.getElementById('inputText').value;
const output = document.getElementById('outputText').value;
document.getElementById('inputCount').textContent = `字符数: ${input.length}`;
document.getElementById('outputCount').textContent = `字符数: ${output.length}`;
}
// 历史记录管理
function addToHistory(type, input, output) {
const historyItem = {
type: type,
typeName: getConversionName(type),
input: input.substring(0, 100),
output: output.substring(0, 100),
timestamp: new Date().toLocaleString()
};
conversionHistory.unshift(historyItem);
if (conversionHistory.length > 10) {
conversionHistory.pop();
}
updateHistoryDisplay();
saveHistory();
}
function updateHistoryDisplay() {
const container = document.getElementById('historyContainer');
if (conversionHistory.length === 0) {
container.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无转换历史</div>';
return;
}
container.innerHTML = conversionHistory.map((item, index) => `
<div class="history-item" onclick="restoreFromHistory(${index})">
<div class="history-type">${item.typeName} - ${item.timestamp}</div>
<div class="history-text">输入: ${item.input}${item.input.length > 100 ? '...' : ''}</div>
</div>
`).join('');
}
function restoreFromHistory(index) {
const item = conversionHistory[index];
// 这里我们只能恢复原始输入，因为我们只保存了截断的版本
// 在实际应用中，你可能想要保存完整的文本
showToast('历史记录功能：点击可查看转换详情');
}
function saveHistory() {
localStorage.setItem('conversionHistory', JSON.stringify(conversionHistory));
}
function loadHistory() {
const saved = localStorage.getItem('conversionHistory');
if (saved) {
conversionHistory = JSON.parse(saved);
updateHistoryDisplay();
}
}
// 实用功能
function copyOutput() {
const output = document.getElementById('outputText');
if (!output.value.trim()) {
showToast('没有可复制的内容', 'warning');
return;
}
output.select();
document.execCommand('copy');
showToast('结果已复制到剪贴板');
}
function clearAll() {
document.getElementById('inputText').value = '';
document.getElementById('outputText').value = '';
updateStats();
updateCharacterCount();
showToast('已清空所有内容');
}
function swapTexts() {
const input = document.getElementById('inputText');
const output = document.getElementById('outputText');
const temp = input.value;
input.value = output.value;
output.value = temp;
updateStats();
updateCharacterCount();
showToast('文本已交换');
}
function togglePreviewMode() {
isPreviewMode = !isPreviewMode;
const button = event.target;
if (isPreviewMode) {
button.textContent = '👁️ 退出预览';
button.style.background = '#ff9800';
showToast('预览模式已开启');
} else {
button.textContent = '👁️ 预览模式';
button.style.background = '';
showToast('预览模式已关闭');
}
}
function downloadResult() {
const content = document.getElementById('outputText').value;
if (!content.trim()) {
showToast('没有可下载的内容', 'warning');
return;
}
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'converted_text.txt';
a.click();
URL.revokeObjectURL(url);
showToast('文件下载已开始');
}
function toggleRealTimeMode() {
isRealTimeMode = !isRealTimeMode;
const indicator = document.getElementById('modeIndicator');
const button = event.target;
if (isRealTimeMode) {
indicator.textContent = '实时模式';
button.textContent = '⚡ 实时转换';
button.style.background = '';
showToast('实时转换已开启');
} else {
indicator.textContent = '手动模式';
button.textContent = '⚡ 手动模式';
button.style.background = '#ff9800';
showToast('已切换到手动模式');
}
}
function showHelp() {
const helpText = `
🔄 智能文本大小写转换器使用说明：
📝 基础功能：
• 全小写：将所有字母转为小写
• 全大写：将所有字母转为大写
• 首字母大写：每个单词首字母大写
• 句式大写：每句话首字母大写
🛠️ 编程格式：
• 驼峰式：firstName (首字母小写)
• 帕斯卡式：FirstName (首字母大写)
• 蛇形式：first_name (下划线分隔)
• 烤串式：first-name (短横线分隔)
🎯 特殊功能：
• 大小写反转：大写变小写，小写变大写
• 交替大小写：字符间交替变换
• 随机大小写：随机转换字符大小写
⚡ 实用工具：
• 实时转换：输入时自动应用上次转换
• 预览模式：可视化转换效果
• 转换历史：查看最近的转换记录
• 文本统计：字符、单词、行数统计
💡 快捷键：
• Ctrl+A：全选文本
• Ctrl+C：复制选中内容
• Ctrl+V：粘贴文本
`;
alert(helpText);
}
// 提示消息
function showToast(message, type = 'success') {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.className = 'toast show';
if (type === 'warning') {
toast.style.background = '#ff9800';
} else if (type === 'error') {
toast.style.background = '#f44336';
} else {
toast.style.background = '#4caf50';
}
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
// 键盘快捷键
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'Enter') {
const lastConversion = localStorage.getItem('lastConversion');
if (lastConversion) {
convertCase(lastConversion);
}
}
});
</script>
</body>
</html> 
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）