- 分享
加密解密工具
-
[管理员]wleea
LV 6
(85/120)
@
2024-9-21 11:59:39
加密解密工具
AI写的
注意是html！
(2024/10/01 16:37 v2.0.0)
<!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>
body {
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
max-width: 800px; /* 缩小界面宽度 */
max-height: 90vh; /* 限制界面高度 */
overflow-y: auto; /* 允许垂直滚动 */
}
h1 {
text-align: center;
color: #333;
}
.section {
background-color: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.copy-btn {
background-color: #008CBA;
}
.swap-btn {
background-color: #f44336;
}
.clear-btn {
background-color: #555555;
}
.toast {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
transition: visibility 0s, opacity 0.5s linear; /* 添加过渡效果 */
}
.toast.show {
visibility: visible;
opacity: 1; /* 显示时不透明 */
transform: translateY(0); /* 跳出效果 */
}
.toast.success {
background-color: #4CAF50; /* 成功信息的绿色背景 */
}
.toast.error {
background-color: #f44336; /* 错误信息的红色背景 */
}
.toast.warning {
background-color: #FFC107; /* 警告信息的黄色背景 */
}
.tabs {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
border-radius: 8px 8px 0 0;
margin-bottom: 20px; /* 增加底部间距 */
max-width: 800px; /* 缩小选项卡宽度 */
width: 100%; /* 使选项卡宽度自适应 */
}
.tab-button {
background-color: inherit;
border: 1px solid #ccc; /* 增加边框 */
border-bottom: none; /* 去掉底部边框 */
float: left;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
margin-right: 2px; /* 增加按钮间距 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 增加阴影 */
color: black; /* 按钮文字颜色改为黑色 */
text-align: center; /* 文字居中 */
height: 50px; /* 固定按钮高度 */
}
.tab-button:hover {
background-color: #ddd;
}
.tab-button.active {
background-color: #ccc;
border-top: 2px solid #4CAF50; /* 激活状态的顶部边框 */
box-shadow: none; /* 去掉激活状态的阴影 */
}
.tab-content {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 8px 8px;
overflow-y: auto; /* 允许垂直滚动 */
}
.color-result {
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>加密解密工具</h1>
<div class="toast" id="toast"></div>
<div class="tabs">
<button class="tab-button active" onclick="openTab(event, 'encryptDecryptTab')">加密/解密</button>
<button class="tab-button" onclick="openTab(event, 'moreFunctionsTab')">更多功能</button>
</div>
<div id="encryptDecryptTab" class="tab-content" style="display: block;">
<div class="tabs">
<button class="tab-button active" onclick="openSubTab(event, 'base64Tab')">Base64</button>
<button class="tab-button" onclick="openSubTab(event, 'base32Tab')">Base32</button>
<button class="tab-button" onclick="openSubTab(event, 'escapeTab')">Escape</button>
<button class="tab-button" onclick="openSubTab(event, 'morseTab')">摩斯密码</button>
</div>
<div id="base64Tab" class="tab-content" style="display: block;">
<div class="section">
<h2>Base64 编码</h2>
<textarea id="base64Input" placeholder="输入文本"></textarea>
<br>
<button onclick="base64Encode()">加密</button>
<button onclick="base64Decode()">解密</button>
<button class="copy-btn" onclick="copyToClipboard('base64Output')">复制结果</button>
<button class="swap-btn" onclick="swapContent('base64')">交换内容</button>
<button class="clear-btn" onclick="clearContent('base64')">清空</button>
<textarea id="base64Output" readonly placeholder="结果"></textarea>
<div class="multi-encrypt">
<input type="number" id="base64Times" min="1" value="1" placeholder="次数">
<button onclick="multiBase64Encode()">多重加密</button>
<button onclick="multiBase64Decode()">多重解密</button>
</div>
</div>
</div>
<div id="base32Tab" class="tab-content">
<div class="section">
<h2>Base32 编码</h2>
<textarea id="base32Input" placeholder="输入文本"></textarea>
<br>
<button onclick="base32Encode()">加密</button>
<button onclick="base32Decode()">解密</button>
<button class="copy-btn" onclick="copyToClipboard('base32Output')">复制结果</button>
<button class="swap-btn" onclick="swapContent('base32')">交换内容</button>
<button class="clear-btn" onclick="clearContent('base32')">清空</button>
<textarea id="base32Output" readonly placeholder="结果"></textarea>
<div class="multi-encrypt">
<input type="number" id="base32Times" min="1" value="1" placeholder="次数">
<button onclick="multiBase32Encode()">多重加密</button>
<button onclick="multiBase32Decode()">多重解密</button>
</div>
</div>
</div>
<div id="escapeTab" class="tab-content">
<div class="section">
<h2>Escape 编码</h2>
<textarea id="escapeInput" placeholder="输入文本"></textarea>
<br>
<button onclick="escapeEncode()">加密</button>
<button onclick="escapeDecode()">解密</button>
<button class="copy-btn" onclick="copyToClipboard('escapeOutput')">复制结果</button>
<button class="swap-btn" onclick="swapContent('escape')">交换内容</button>
<button class="clear-btn" onclick="clearContent('escape')">清空</button>
<textarea id="escapeOutput" readonly placeholder="结果"></textarea>
</div>
</div>
<div id="morseTab" class="tab-content">
<div class="section">
<h2>摩斯密码</h2>
<textarea id="morseInput" placeholder="输入文本"></textarea>
<br>
<button onclick="morseEncode()">编码</button>
<button onclick="morseDecode()">解码</button>
<button class="copy-btn" onclick="copyToClipboard('morseOutput')">复制结果</button>
<button class="clear-btn" onclick="clearContent('morse')">清空</button>
<textarea id="morseOutput" readonly placeholder="结果"></textarea>
</div>
</div>
</div>
<div id="moreFunctionsTab" class="tab-content">
<div class="tabs">
<button class="tab-button active" onclick="openMoreSubTab(event, 'conversionTab')">进制转换</button>
<button class="tab-button" onclick="openMoreSubTab(event, 'colorCodeTab')">颜色代码获取</button>
<button class="tab-button" onclick="openMoreSubTab(event, 'hitokotoTab')">一言</button>
</div>
<div id="conversionTab" class="tab-content" style="display: block;">
<div class="section">
<h2>进制转换</h2>
<input type="text" id="numberInput" placeholder="输入数字">
<select id="baseSelect">
<option value="2">二进制</option>
<option value="8">八进制</option>
<option value="10">十进制</option>
<option value="16">十六进制</option>
</select>
<button onclick="convertBase()">转换</button>
<div id="conversionOutput" class="color-result">结果将显示在这里</div>
</div>
</div>
<div id="colorCodeTab" class="tab-content">
<div class="section">
<h2>颜色代码获取</h2>
<input type="color" id="colorPicker" onchange="getColorCode()">
<div id="colorOutput" class="color-result">RGB 和 HEX 代码将显示在这里</div>
</div>
</div>
<div id="hitokotoTab" class="tab-content">
<div class="section">
<h2>一言</h2>
<button onclick="fetchHitokoto()">获取一句话</button>
<div id="hitokotoOutput" class="color-result">句子和作者出处将显示在这里</div>
</div>
</div>
</div>
<script>
function showToast(message, type) {
const toast = document.getElementById("toast");
toast.className = "toast show " + (type || "success");
toast.innerHTML = message;
setTimeout(() => {
toast.className = toast.className.replace("show", "");
}, 3000);
}
function base64Encode() {
const input = document.getElementById('base64Input').value;
try {
const output = btoa(input);
document.getElementById('base64Output').value = output;
} catch (e) {
showToast("加密失败，输入文本可能不正确", "error");
}
}
function base64Decode() {
const input = document.getElementById('base64Input').value;
try {
const output = atob(input);
document.getElementById('base64Output').value = output;
} catch (e) {
showToast("解密失败，输入文本可能不正确", "error");
}
}
function multiBase64Encode() {
const input = document.getElementById('base64Input').value;
const times = parseInt(document.getElementById('base64Times').value);
let output = input;
try {
for (let i = 0; i < times; i++) {
output = btoa(output);
}
document.getElementById('base64Output').value = output;
} catch (e) {
showToast("多重加密失败，输入文本可能不正确", "error");
}
}
function multiBase64Decode() {
const input = document.getElementById('base64Input').value;
const times = parseInt(document.getElementById('base64Times').value);
let output = input;
try {
for (let i = 0; i < times; i++) {
output = atob(output);
}
document.getElementById('base64Output').value = output;
} catch (e) {
showToast("多重解密失败，输入文本可能不正确", "error");
}
}
function base32Encode() {
// Base32 编码逻辑
const input = document.getElementById('base32Input').value;
// 这里需要实现 Base32 编码
// 由于 Base32 编码的实现较复杂，建议使用现成的库
// 例如: https://github.com/TooTallNate/base32.js
// 这里仅为示例
document.getElementById('base32Output').value = "Base32 编码结果"; // 替换为实际编码结果
}
function base32Decode() {
// Base32 解码逻辑
const input = document.getElementById('base32Input').value;
// 这里需要实现 Base32 解码
document.getElementById('base32Output').value = "Base32 解码结果"; // 替换为实际解码结果
}
function escapeEncode() {
const input = document.getElementById('escapeInput').value;
const output = encodeURIComponent(input);
document.getElementById('escapeOutput').value = output;
}
function escapeDecode() {
const input = document.getElementById('escapeInput').value;
try {
const output = decodeURIComponent(input);
document.getElementById('escapeOutput').value = output;
} catch (e) {
showToast("解码失败，输入文本可能不正确", "error");
}
}
function morseEncode() {
const input = document.getElementById('morseInput').value.toUpperCase();
const morseCode = {
'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.', 'F': '..-.',
'G': '--.', 'H': '....', 'I': '..', 'J': '.---', 'K': '-.-', 'L': '.-..',
'M': '--', 'N': '-.', 'O': '---', 'P': '.--.', 'Q': '--.-', 'R': '.-.',
'S': '...', 'T': '-', 'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-',
'Y': '-.--', 'Z': '--..',
'0': '-----', '1': '.----', '2': '..---', '3': '...--', '4': '....-',
'5': '.....', '6': '-....', '7': '--...', '8': '---..', '9': '----.',
' ': '/'
};
let output = '';
for (let char of input) {
output += morseCode[char] ? morseCode[char] + ' ' : '';
}
document.getElementById('morseOutput').value = output.trim();
}
function morseDecode() {
const input = document.getElementById('morseOutput').value.trim();
const morseArray = input.split(' ');
const morseCode = {
'.-': 'A', '-...': 'B', '-.-.': 'C', '-..': 'D', '.': 'E', '..-.': 'F',
'--.': 'G', '....': 'H', '..': 'I', '.---': 'J', '-.-': 'K', '.-..': 'L',
'--': 'M', '-.': 'N', '---': 'O', '.--.': 'P', '--.-': 'Q', '.-.': 'R',
'...': 'S', '-': 'T', '..-': 'U', '...-': 'V', '.--': 'W', '-..-': 'X',
'-.--': 'Y', '--..': 'Z',
'-----': '0', '.----': '1', '..---': '2', '...--': '3', '....-': '4',
'.....': '5', '-....': '6', '--...': '7', '---..': '8', '----.': '9',
'/': ' '
};
let output = '';
for (let code of morseArray) {
const char = morseCode[code];
output += char ? char : '';
}
document.getElementById('morseOutput').value = output; // 更新结果框
}
function convertBase() {
const number = document.getElementById('numberInput').value;
const base = parseInt(document.getElementById('baseSelect').value);
let output;
try {
if (base === 2) {
output = parseInt(number, 2).toString(10); // 二进制转十进制
} else if (base === 8) {
output = parseInt(number, 8).toString(10); // 八进制转十进制
} else if (base === 10) {
output = parseInt(number, 10).toString(16); // 十进制转十六进制
} else if (base === 16) {
output = parseInt(number, 16).toString(10); // 十六进制转十进制
}
document.getElementById('conversionOutput').innerText = output.toUpperCase();
} catch (e) {
showToast("进制转换失败", "error");
}
}
function getColorCode() {
const colorPicker = document.getElementById('colorPicker');
const colorValue = colorPicker.value;
const rgb = `RGB: ${parseInt(colorValue.slice(1, 3), 16)}, ${parseInt(colorValue.slice(3, 5), 16)}, ${parseInt(colorValue.slice(5, 7), 16)}`;
const hex = colorValue.toUpperCase();
document.getElementById('colorOutput').innerText = `${rgb}\nHEX: ${hex}`;
}
function fetchHitokoto() {
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
const hitokotoOutput = document.getElementById('hitokotoOutput');
hitokotoOutput.innerHTML = `"${data.hitokoto}"<br>- ${data.from || '未知'}`;
})
.catch(error => {
showToast("获取一言失败", "error");
});
}
function copyToClipboard(elementId) {
const copyText = document.getElementById(elementId);
copyText.select();
document.execCommand("copy");
showToast("复制成功", "success");
}
function clearContent(type) {
if (type === 'base64') {
document.getElementById('base64Input').value = '';
document.getElementById('base64Output').value = '';
} else if (type === 'base32') {
document.getElementById('base32Input').value = '';
document.getElementById('base32Output').value = '';
} else if (type === 'escape') {
document.getElementById('escapeInput').value = '';
document.getElementById('escapeOutput').value = '';
} else if (type === 'morse') {
document.getElementById('morseInput').value = '';
document.getElementById('morseOutput').value = '';
}
}
function swapContent(type) {
if (type === 'base64') {
const input = document.getElementById('base64Input').value;
const output = document.getElementById('base64Output').value;
document.getElementById('base64Input').value = output;
document.getElementById('base64Output').value = input;
} else if (type === 'base32') {
const input = document.getElementById('base32Input').value;
const output = document.getElementById('base32Output').value;
document.getElementById('base32Input').value = output;
document.getElementById('base32Output').value = input;
} else if (type === 'escape') {
const input = document.getElementById('escapeInput').value;
const output = document.getElementById('escapeOutput').value;
document.getElementById('escapeInput').value = output;
document.getElementById('escapeOutput').value = input;
}
}
// 切换选项卡
function openTab(evt, tabName) {
const tabContent = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
const tabButtons = document.getElementsByClassName("tab-button");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].className = tabButtons[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// 切换子选项卡
function openSubTab(evt, subTabName) {
const subTabContent = document.querySelectorAll('#encryptDecryptTab .tab-content');
for (let i = 0; i < subTabContent.length; i++) {
subTabContent[i].style.display = "none";
}
const subTabButtons = document.querySelectorAll('#encryptDecryptTab .tab-button');
for (let i = 0; i < subTabButtons.length; i++) {
subTabButtons[i].className = subTabButtons[i].className.replace(" active", "");
}
document.getElementById(subTabName).style.display = "block";
evt.currentTarget.className += " active";
}
// 切换更多功能子选项卡
function openMoreSubTab(evt, moreSubTabName) {
const moreSubTabContent = document.querySelectorAll('#moreFunctionsTab .tab-content');
for (let i = 0; i < moreSubTabContent.length; i++) {
moreSubTabContent[i].style.display = "none";
}
const moreSubTabButtons = document.querySelectorAll('#moreFunctionsTab .tab-button');
for (let i = 0; i < moreSubTabButtons.length; i++) {
moreSubTabButtons[i].className = moreSubTabButtons[i].className.replace(" active", "");
}
document.getElementById(moreSubTabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
1 条评论
-
高棋 LV 1 (-8/70) @ 2024-10-2 21:39:03
- 1