console
function encrypt(text, key) {
let encryptedText = '';
for (let i = 0, j = 0; i < text.length; i++, j++) {
if (j >= key.length) j = 0;
encryptedText += String.fromCharCode(text.charCodeAt(i) ^ key.charCodeAt(j));
}
return encryptedText;
}
function decrypt(text, key) {
return encrypt(text, key);
}
function downloadFile(content, fileName, fileType) {
const blob = new Blob([content], { type: fileType });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = fileName;
a.click();
URL.revokeObjectURL(a.href);
}
const fileInput = document.getElementById('fileInput');
const keyInput = document.getElementById('keyInput');
const resultMessage = document.getElementById('resultMessage');
const encryptButton = document.getElementById('encryptButton');
const decryptButton = document.getElementById('decryptButton');
encryptButton.addEventListener('click', async () => {
const key = keyInput.value;
if (key === '') {
alert('请输入自定义密钥');
return;
}
const file = fileInput.files[0];
if (file) {
const text = await file.text();
const encryptedText = encrypt(text, key);
const newFileName = file.name + '.encrypted';
downloadFile(encryptedText, newFileName, 'text/plain');
resultMessage.textContent = `加密成功,已生成 ${newFileName}`;
} else {
alert('请选择要加密的文件');
}
});
decryptButton.addEventListener('click', async () => {
const key = keyInput.value;
if (key === '') {
alert('请输入自定义密钥');
return;
}
const file = fileInput.files[0];
if (file) {
const text = await file.text();
const decryptedText = decrypt(text, key);
const newFileName = file.name.replace('.encrypted', '');
downloadFile(decryptedText, newFileName, 'text/plain');
resultMessage.textContent = `解密成功,已生成 ${newFileName}`;
} else {
alert('请选择要解密的文件');
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>文件加解密工具</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>文件加解密工具</h1>
<input type="file" id="fileInput">
<input type="text" id="keyInput" placeholder="输入自定义密钥">
<button id="encryptButton">加密</button>
<button id="decryptButton">解密</button>
<div id="resultMessage"></div>
<script src="script.js"></script>
</body>
</html>
body {
font - family: Arial, sans - serif;
padding: 20px;
}
input[type="file"],
input[type="text"] {
margin - bottom: 10px;
width: 100%;
padding: 5px;
}
button {
padding: 10px 20px;
background - color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin - right: 10px;
}
#resultMessage {
margin - top: 10px;
color: green;
}