这是一个简单而实用的在线大小写转换工具。它允许用户输入任意文本,并提供三种转换选项:转换为全大写、全小写或首字母大写。
使用这个工具非常简单快捷。用户只需要在输入框中输入想要转换的文本,选择合适的转换类型,然后点击"转换"按钮即可。转换结果会立即显示在输出框中,用户可以直接复制使用
这个在线转换工具采用纯前端技术实现,没有任何后端依赖。它的代码简洁易懂,可以作为初学者学习 HTML、CSS 和 JavaScript 的良好示例。同时,它也可以作为开发更复杂的文本处理工具的基础。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英文字母大小写在线转换工具-丢塔游戏网</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.input-section,
.output-section {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>英文字母大小写在线转换工具</h1>
<div class="container">
<div class="input-section">
<label for="input-text">输入文本:</label>
<textarea id="input-text"></textarea>
</div>
<div class="conversion-section">
<label for="conversion-type">选择转换类型:</label>
<select id="conversion-type">
<option value="uppercase">转换为大写</option>
<option value="lowercase">转换为小写</option>
<option value="titlecase">转换为首字母大写</option>
</select>
<button id="convert-button">转换</button>
</div>
<div class="output-section">
<label for="output-text">转换结果:</label>
<textarea id="output-text" readonly></textarea>
</div>
</div>
<script>
const inputText = document.getElementById('input-text');
const conversionType = document.getElementById('conversion-type');
const convertButton = document.getElementById('convert-button');
const outputText = document.getElementById('output-text');
convertButton.addEventListener('click', () => {
const input = inputText.value;
const type = conversionType.value;
let output;
switch (type) {
case 'uppercase':
output = input.toUpperCase();
break;
case 'lowercase':
output = input.toLowerCase();
break;
case 'titlecase':
output = input.replace(/\b\w/g, (char) => char.toUpperCase());
break;
default:
output = input;
}
outputText.value = output;
});
</script>
</body>
</html>
可以直接将这个代码保存为html格式就可以直接使用了。
可以查看案例：diuta.com/app/zt.html
