TA的每日心情 | 开心
2024-8-8 11:24 |
|---|
签到天数: 75 天 [LV.6]常住居民II
|
|
文字渐变颜色代码生成器：让文字绽放多彩魅力 在信息交流日益丰富的今天，个性化的文字展示成为吸引目光的关键。这款文字渐变颜色代码生成器，便是为满足这一需求而生的绿色软件，无需安装，便捷实用。 它的操作极为简便。用户只需在软件界面中输入想要转换的文字内容，接着从丰富的色彩选项里挑选心仪的起始颜色与结束颜色，随后轻轻按下 “转换按钮”，神奇的事情就此发生 —— 适用于论坛、网页、QQ 空间等多种平台，以及自定义格式的渐变颜色代码便会即刻生成。
不仅如此，生成的代码还能自动复制到剪切板，极大地节省了用户手动复制的时间。当你在论坛回帖、更新网页内容或是装扮 QQ 空间时，只需轻松粘贴代码，原本单调的文字瞬间就能拥有绚丽的渐变色彩，瞬间脱颖而出，为你的表达增添独特魅力，让文字不再平凡，轻松成为视觉焦点。 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>[/align]<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字渐变颜色代码生成器 - 大飞哥软件自习室</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 1100px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.header {
text-align: center;
margin-bottom: 30px;
position: relative;
}
h1 {
color: #333;
margin-bottom: 5px;
}
.brand {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
.brand a {
color: #FF4E50;
text-decoration: none;
font-weight: bold;
}
.brand a:hover {
text-decoration: underline;
}
.tab-container {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.tab {
padding: 10px 20px;
cursor: pointer;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-bottom: none;
border-radius: 5px 5px 0 0;
margin-right: 5px;
}
.tab.active {
background-color: white;
border-bottom: 1px solid white;
margin-bottom: -1px;
font-weight: bold;
}
.panel {
display: none;
background-color: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 0 5px 5px 5px;
}
.panel.active {
display: block;
}
.container {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.editor-section, .preview-section {
flex: 1;
display: flex;
flex-direction: column;
}
textarea, .preview {
flex: 1;
min-height: 200px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: white;
font-size: 16px;
line-height: 1.5;
}
textarea {
resize: none;
}
.preview {
overflow-y: auto;
}
.button-section {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
button.copy {
background-color: #2196F3;
}
button.copy:hover {
background-color: #0b7dda;
}
.color-picker {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.color-picker label {
margin-right: 10px;
width: 80px;
}
.color-picker input[type="color"] {
width: 50px;
height: 30px;
padding: 0;
border: 1px solid #ddd;
}
.instructions {
background-color: #fffde7;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
border-left: 5px solid #ffd600;
}
.gradient-controls {
margin-bottom: 15px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="header">
<h1>文字渐变颜色代码生成器</h1>
<div class="brand">大飞哥软件自习室荣誉出品 - <a href="https://space.bilibili.com/286436365" target="_blank">访问我的B站主页</a></div>
</div>
<div class="tab-container">
<div class="tab active" data-tab="tab1">解析现有颜色代码</div>
<div class="tab" data-tab="tab2">生成渐变颜色代码</div>
<div class="tab" data-tab="tab3">单色转换</div>
</div>
<!-- 面板1：解析现有颜色代码 -->
<div id="tab1" class="panel active">
<div class="container">
<div class="editor-section">
<h3>输入区域</h3>
<textarea id="input-text" placeholder="请在此粘贴您的渐变颜色代码，如：[color=#FF0000]文[/color][color=#F3000C]字[/color]..."></textarea>
</div>
<div class="button-section">
<button id="convert-btn">转换 →</button>
<button id="copy-btn" class="copy">复制代码</button>
</div>
<div class="preview-section">
<h3>预览区域</h3>
<div id="preview" class="preview"></div>
</div>
</div>
</div>
<!-- 面板2：生成渐变颜色代码 -->
<div id="tab2" class="panel">
<div class="gradient-controls">
<div class="color-picker">
<label>起始颜色:</label>
<input type="color" id="start-color" value="#FF0000">
<span id="start-color-value">#FF0000</span>
</div>
<div class="color-picker">
<label>结束颜色:</label>
<input type="color" id="end-color" value="#0F00F0">
<span id="end-color-value">#0F00F0</span>
</div>
</div>
<div class="container">
<div class="editor-section">
<h3>输入文本</h3>
<textarea id="gradient-input-text" placeholder="请输入要添加渐变颜色的文本"></textarea>
</div>
<div class="button-section">
<button id="generate-gradient-btn">生成渐变 →</button>
<button id="copy-gradient-btn" class="copy">复制代码</button>
</div>
<div class="preview-section">
<h3>预览区域</h3>
<div id="gradient-preview" class="preview"></div>
</div>
</div>
</div>
<!-- 面板3：单色转换 -->
<div id="tab3" class="panel">
<div class="color-picker">
<label>选择颜色:</label>
<input type="color" id="single-color" value="#4CAF50">
<span id="single-color-value">#4CAF50</span>
</div>
<div class="container">
<div class="editor-section">
<h3>输入文本</h3>
<textarea id="single-input-text" placeholder="请输入要添加颜色的文本"></textarea>
</div>
<div class="button-section">
<button id="generate-single-btn">转换颜色 →</button>
<button id="copy-single-btn" class="copy">复制代码</button>
</div>
<div class="preview-section">
<h3>预览区域</h3>
<div id="single-preview" class="preview"></div>
</div>
</div>
</div>
<div class="instructions">
<h3>使用说明：</h3>
<p><strong>1. 解析现有颜色代码</strong> - 解析已有的[color=#XXXXXX]格式代码并预览效果</p>
<p><strong>2. 生成渐变颜色代码</strong> - 输入普通文本，选择起始和结束颜色，自动生成渐变效果</p>
<p><strong>3. 单色转换</strong> - 输入普通文本，选择单一颜色，生成带颜色代码的文本</p>
<p>所有功能生成的代码都可以复制后用于支持HTML的环境</p>
</div>
<script>
// 标签页切换
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() {
// 移除所有活动标签和面板
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
// 激活当前标签和对应面板
this.classList.add('active');
const panelId = this.getAttribute('data-tab');
document.getElementById(panelId).classList.add('active');
});
});
// 颜色选择器显示值更新
document.getElementById('start-color').addEventListener('input', function() {
document.getElementById('start-color-value').textContent = this.value;
});
document.getElementById('end-color').addEventListener('input', function() {
document.getElementById('end-color-value').textContent = this.value;
});
document.getElementById('single-color').addEventListener('input', function() {
document.getElementById('single-color-value').textContent = this.value;
});
// 面板1功能：解析现有颜色代码
document.getElementById('convert-btn').addEventListener('click', function() {
const inputText = document.getElementById('input-text').value;
const preview = document.getElementById('preview');
preview.innerHTML = '';
if (!inputText.trim()) {
preview.textContent = '请输入或粘贴包含颜色代码的文本';
return;
}
const htmlOutput = parseColorTags(inputText);
preview.innerHTML = htmlOutput;
});
document.getElementById('copy-btn').addEventListener('click', function() {
const inputText = document.getElementById('input-text').value;
const htmlOutput = parseColorTags(inputText);
copyToClipboard(htmlOutput, 'HTML代码已复制到剪贴板！');
});
// 面板2功能：生成渐变颜色代码
document.getElementById('generate-gradient-btn').addEventListener('click', function() {
const inputText = document.getElementById('gradient-input-text').value;
const preview = document.getElementById('gradient-preview');
const startColor = document.getElementById('start-color').value;
const endColor = document.getElementById('end-color').value;
preview.innerHTML = '';
if (!inputText.trim()) {
preview.textContent = '请输入要添加渐变颜色的文本';
return;
}
const htmlOutput = generateGradientText(inputText, startColor, endColor);
preview.innerHTML = htmlOutput;
});
document.getElementById('copy-gradient-btn').addEventListener('click', function() {
const inputText = document.getElementById('gradient-input-text').value;
const startColor = document.getElementById('start-color').value;
const endColor = document.getElementById('end-color').value;
const htmlOutput = generateGradientText(inputText, startColor, endColor);
copyToClipboard(htmlOutput, '渐变颜色代码已复制到剪贴板！');
});
// 面板3功能：单色转换
document.getElementById('generate-single-btn').addEventListener('click', function() {
const inputText = document.getElementById('single-input-text').value;
const preview = document.getElementById('single-preview');
const color = document.getElementById('single-color').value;
preview.innerHTML = '';
if (!inputText.trim()) {
preview.textContent = '请输入要添加颜色的文本';
return;
}
const htmlOutput = generateSingleColorText(inputText, color);
preview.innerHTML = htmlOutput;
});
document.getElementById('copy-single-btn').addEventListener('click', function() {
const inputText = document.getElementById('single-input-text').value;
const color = document.getElementById('single-color').value;
const htmlOutput = generateSingleColorText(inputText, color);
copyToClipboard(htmlOutput, '单色代码已复制到剪贴板！');
});
// 辅助函数
function parseColorTags(text) {
const colorTagRegex = /\[color=(#[0-9A-Fa-f]{6})\](.*?)\[\/color\]/g;
return text.replace(colorTagRegex, function(match, color, content) {
return `<span style="color: ${color}">${content}</span>`;
});
}
function generateGradientText(text, startColor, endColor) {
const chars = Array.from(text);
if (chars.length === 0) return '';
// 计算颜色渐变步长
const startRGB = hexToRgb(startColor);
const endRGB = hexToRgb(endColor);
const steps = chars.length - 1;
let result = '';
chars.forEach((char, index) => {
const ratio = steps > 0 ? index / steps : 0;
const r = Math.round(startRGB.r + (endRGB.r - startRGB.r) * ratio);
const g = Math.round(startRGB.g + (endRGB.g - startRGB.g) * ratio);
const b = Math.round(startRGB.b + (endRGB.b - startRGB.b) * ratio);
const color = rgbToHex(r, g, b);
result += `<span style="color: ${color}">${char}</span>`;
});
return result;
}
function generateSingleColorText(text, color) {
return `<span style="color: ${color}">${text}</span>`;
}
function hexToRgb(hex) {
const r = parseInt(hex.substring(1, 3), 16);
const g = parseInt(hex.substring(3, 5), 16);
const b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b].map(x => {
const hex = x.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('');
}
function copyToClipboard(text, successMessage) {
const tempTextarea = document.createElement('textarea');
tempTextarea.value = text;
document.body.appendChild(tempTextarea);
tempTextarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert(successMessage);
} else {
alert('复制失败，请手动选择并复制。');
}
} catch (err) {
alert('复制时出错: ' + err);
}
document.body.removeChild(tempTextarea);
}
// 初始化示例
document.addEventListener('DOMContentLoaded', function() {
// 面板1示例
const exampleText = '[color=#FF0000]文[/color][color=#F3000C]字[/color][color=#E70018]渐[/color][color=#DB0024]变[/color][color=#CF0030]颜[/color][color=#C3003C]色[/color][color=#B70048]代[/color][color=#AB0054]码[/color][color=#9F0060]生[/color][color=#93006C]成[/color][color=#870078]器[/color][color=#7B0084]：[/color][color=#6F0090]让[/color][color=#63009C]文[/color][color=#5700A8]字[/color][color=#4B00B4]绽[/color][color=#3F00C0]放[/color][color=#3300CC]多[/color][color=#2700D8]彩[/color][color=#1B00E4]魅[/color][color=#0F00F0]力[/color]';
document.getElementById('input-text').value = exampleText;
document.getElementById('convert-btn').click();
// 面板2示例
document.getElementById('gradient-input-text').value = '文字渐变颜色代码生成器：让文字绽放多彩魅力';
// 面板3示例
document.getElementById('single-input-text').value = '这是单色显示的文本示例';
});
</script>
</body>
</html>
一款可以轻松把一段文字生成渐变颜色代码的绿色软件,当你在软件中输入完要转换的文字后,只需要挑选自己喜欢的起始颜色、结束颜色后,按一下―转换按钮即可生成相应的论坛/网页/QQ空间以及自定义格式代码,并且代码可以自动复制到剪切板中,回帖时直接粘贴代码即可不错得文字代码生成器,让你得文字更加漂亮.
|
|
[复制链接]
IP卡
发表于 
提升卡
置顶卡
变色卡
千斤顶
显身卡
发表于 
发表于 
发表于 
