File: /var/www/html/private/代码生成颜色.html
<script type="text/javascript">
var gk_isXlsx = false;
var gk_xlsxFileLookup = {};
var gk_fileData = {};
function filledCell(cell) {
return cell !== '' && cell != null;
}
function loadFileData(filename) {
if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
try {
var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
var firstSheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[firstSheetName];
// Convert sheet to JSON to filter blank rows
var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
// Filter out blank rows (rows where all cells are empty, null, or undefined)
var filteredData = jsonData.filter(row => row.some(filledCell));
// Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
var headerRowIndex = filteredData.findIndex((row, index) =>
row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
);
// Fallback
if (headerRowIndex === -1 || headerRowIndex > 25) {
headerRowIndex = 0;
}
// Convert filtered JSON back to CSV
var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
return csv;
} catch (e) {
console.error(e);
return "";
}
}
return gk_fileData[filename] || "";
}
</script><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色生成器</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100 transition-colors duration-300">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold mb-4 text-center">颜色生成器</h1>
<input
id="colorInput"
type="text"
placeholder="输入16进制（如 #FF0000）或十进制（如 255,0,0）"
class="w-full p-2 mb-4 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<button
onclick="generateColor()"
class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition"
>
生成颜色
</button>
<p id="errorMessage" class="text-red-500 text-sm mt-2 hidden"></p>
</div>
<script>
function generateColor() {
const input = document.getElementById('colorInput').value.trim();
const errorMessage = document.getElementById('errorMessage');
let color = '';
// 重置错误信息
errorMessage.classList.add('hidden');
errorMessage.textContent = '';
// 处理16进制输入
if (input.startsWith('#')) {
const hex = input.replace('#', '');
const hexPattern = /^[0-9A-Fa-f]{6}$/;
if (hexPattern.test(hex)) {
color = `#${hex}`;
}
}
// 处理十进制RGB输入（如 255,0,0）
else if (input.includes(',')) {
const rgb = input.split(',').map(num => parseInt(num.trim()));
if (rgb.length === 3 && rgb.every(num => num >= 0 && num <= 255 && !isNaN(num))) {
color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}
}
// 应用颜色或显示错误
if (color) {
document.body.style.backgroundColor = color;
} else {
errorMessage.textContent = '请输入有效的颜色值（例如 #FF0000 或 255,0,0）';
errorMessage.classList.remove('hidden');
}
}
// 按回车键触发生成
document.getElementById('colorInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
generateColor();
}
});
</script>
</body>
</html>