body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.container {
background-color: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #2c3e50;
}
textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
resize: vertical;
min-height: 150px;
font-family: inherit;
transition: border-color 0.3s;
}
textarea:focus {
border-color: #3498db;
outline: none;
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s;
margin-right: 10px;
margin-bottom: 10px;
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.btn-secondary {
background-color: #95a5a6;
}
.btn-secondary:hover {
background-color: #7f8c8d;
}
.btn-success {
background-color: #2ecc71;
}
.btn-success:hover {
background-color: #27ae60;
}
.result-container {
margin-top: 30px;
border-top: 2px solid #eee;
padding-top: 25px;
}
.result-box {
position: relative;
margin-top: 15px;
}
.result-text {
padding: 15px;
border-radius: 6px;
background-color: #f8f9fa;
border: 1px solid #eee;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
min-height: 100px;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #34495e;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
display: flex;
align-items: center;
}
.copy-btn:hover {
background-color: #2c3e50;
}
.copy-btn svg {
margin-right: 5px;
width: 14px;
height: 14px;
}
.stats {
margin-top: 15px;
font-size: 14px;
color: #7f8c8d;
display: flex;
justify-content: space-between;
}
.options {
background-color: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
border: 1px solid #eee;
}
.radio-group {
margin: 10px 0;
}
.radio-option {
margin-right: 15px;
}
.radio-option input {
margin-right: 5px;
}
.hint {
font-size: 13px;
color: #95a5a6;
margin-top: 5px;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background-color: #2ecc71;
color: white;
padding: 12px 20px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
字符大小写转换工具
输入文本：
转换选项：
全部大写 全部小写 每个单词首字母大写 标题格式（每个句子首字母大写） 句子格式（仅第一个单词首字母大写） 大小写反转
选择您需要的文本大小写转换方式
转换文本清空结果
转换结果：
复制
原始长度: 0 字符
转换后长度: 0 字符
转换时间: 0ms
文本已复制到剪贴板！
document.addEventListener('DOMContentLoaded', function() {
const inputText = document.getElementById('inputText');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
const resultDiv = document.getElementById('result');
const copyBtn = document.getElementById('copyBtn');
const originalLengthSpan = document.getElementById('originalLength');
const convertedLengthSpan = document.getElementById('convertedLength');
const processTimeSpan = document.getElementById('processTime');
const convertOptions = document.querySelectorAll('input[name="convertOption"]');
const notification = document.getElementById('notification');
// 转换文本
convertBtn.addEventListener('click', function() {
const text = inputText.value.trim();
if (!text) {
alert('请输入要转换的文本');
return;
}
const startTime = performance.now();
// 获取选中的转换选项
let selectedOption = 'uppercase';
for (const option of convertOptions) {
if (option.checked) {
selectedOption = option.value;
break;
}
}
// 执行转换
let convertedText = text;
switch (selectedOption) {
case 'uppercase':
convertedText = text.toUpperCase();
break;
case 'lowercase':
convertedText = text.toLowerCase();
break;
case 'capitalize':
convertedText = capitalizeWords(text);
break;
case 'titlecase':
convertedText = titleCase(text);
break;
case 'sentencecase':
convertedText = sentenceCase(text);
break;
case 'inverse':
convertedText = inverseCase(text);
break;
default:
convertedText = text.toUpperCase();
}
const endTime = performance.now();
const timeTaken = (endTime - startTime).toFixed(2);
// 显示结果
resultDiv.textContent = convertedText;
originalLengthSpan.textContent = text.length;
convertedLengthSpan.textContent = convertedText.length;
processTimeSpan.textContent = timeTaken;
});
// 清空结果
clearBtn.addEventListener('click', function() {
inputText.value = '';
resultDiv.textContent = '';
originalLengthSpan.textContent = '0';
convertedLengthSpan.textContent = '0';
processTimeSpan.textContent = '0';
});
// 复制到剪贴板
copyBtn.addEventListener('click', function() {
const textToCopy = resultDiv.textContent;
if (!textToCopy) return;
// 使用现代剪贴板API
if (navigator.clipboard) {
navigator.clipboard.writeText(textToCopy).then(function() {
showNotification();
}).catch(function(err) {
// 如果API失败，使用传统方法
fallbackCopyText(textToCopy);
});
} else {
// 传统复制方法
fallbackCopyText(textToCopy);
}
});
// 传统复制方法
function fallbackCopyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 避免滚动到页面底部
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showNotification();
} else {
alert('复制失败，请手动选择文本并使用Ctrl+C复制');
}
} catch (err) {
alert('复制失败，请手动选择文本并使用Ctrl+C复制');
}
document.body.removeChild(textarea);
}
// 显示通知
function showNotification() {
notification.classList.add('show');
setTimeout(function() {
notification.classList.remove('show');
}, 2000);
}
// 各种转换函数
function capitalizeWords(text) {
return text.replace(/\b\w+/g, function(word) {
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
});
}
function titleCase(text) {
// 简化的标题格式 - 每个句子首字母大写
// 更复杂的实现可以处理例外情况（如"a", "an", "the"等）
return text.replace(/(?:^|\. )\w/g, function(match) {
return match.toUpperCase();
});
}
function sentenceCase(text) {
if (!text) return text;
const trimmed = text.trim();
return trimmed.charAt(0).toUpperCase() + trimmed.slice(1).toLowerCase();
}
function inverseCase(text) {
return text.split('').map(function(char) {
if (char === char.toUpperCase() && char !== char.toLowerCase()) {
return char.toLowerCase();
} else if (char === char.toLowerCase() && char !== char.toUpperCase()) {
return char.toUpperCase();
}
return char;
}).join('');
}
// 实时统计输入字符数（可选）
inputText.addEventListener('input', function() {
// 如果需要实时处理，可以在这里添加代码
});
});