HTML文字加密解密创意案例源码
简介
本文将介绍几种有趣的HTML文字加密解密实现方案，这些方案可以用于网页内容保护、趣味互动或学习JavaScript加密技术。所有案例都提供完整可运行的源码。
基础字符替换加密
<!DOCTYPE html>
<html>
<head>
<title>基础字符替换加密</title>
<script>
function encrypt() {
let text = document.getElementById("input").value;
let result = "";
for (let i = 0; i < text.length; i++) {
result += String.fromCharCode(text.charCodeAt(i) + 3);
}
document.getElementById("output").value = result;
}
function decrypt() {
let text = document.getElementById("output").value;
let result = "";
for (let i = 0; i < text.length; i++) {
result += String.fromCharCode(text.charCodeAt(i) - 3);
}
document.getElementById("input").value = result;
}
</script>
</head>
<body>
<textarea id="input" rows="5" cols="50"></textarea><br>
<button onclick="encrypt()">加密</button>
<button onclick="decrypt()">解密</button><br>
<textarea id="output" rows="5" cols="50"></textarea>
</body>
</html>Base64编码方案
<!DOCTYPE html>
<html>
<head>
<title>Base64编码加密</title>
<script>
function base64Encode() {
let text = document.getElementById("textInput").value;
document.getElementById("textOutput").value = btoa(text);
}
function base64Decode() {
let text = document.getElementById("textOutput").value;
document.getElementById("textInput").value = atob(text);
}
</script>
</head>
<body>
<textarea id="textInput" rows="5" cols="50"></textarea><br>
<button onclick="base64Encode()">Base64编码</button>
<button onclick="base64Decode()">Base64解码</button><br>
<textarea id="textOutput" rows="5" cols="50"></textarea>
</body>
</html>创意视觉加密
<!DOCTYPE html>
<html>
<head>
<title>视觉文字加密</title>
<style>
.encrypted {
color: white;
background-color: white;
}
.decrypted {
color: black;
background-color: white;
}
</style>
</head>
<body>
<p id="secret" class="encrypted">这是一段被隐藏的文字</p>
<button onclick="document.getElementById('secret').className='encrypted'">加密</button>
<button onclick="document.getElementById('secret').className='decrypted'">解密</button>
</body>
</html>高级AES加密方案
<!DOCTYPE html>
<html>
<head>
<title>AES加密解密</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
function aesEncrypt() {
let text = document.getElementById("aesInput").value;
let password = document.getElementById("password").value;
let encrypted = CryptoJS.AES.encrypt(text, password);
document.getElementById("aesOutput").value = encrypted.toString();
}
function aesDecrypt() {
let text = document.getElementById("aesOutput").value;
let password = document.getElementById("password").value;
let decrypted = CryptoJS.AES.decrypt(text, password);
document.getElementById("aesInput").value = decrypted.toString(CryptoJS.enc.Utf8);
}
</script>
</head>
<body>
<input type="password" id="password" placeholder="输入密码"><br>
<textarea id="aesInput" rows="5" cols="50"></textarea><br>
<button onclick="aesEncrypt()">AES加密</button>
<button onclick="aesDecrypt()">AES解密</button><br>
<textarea id="aesOutput" rows="5" cols="50"></textarea>
</body>
</html>应用场景建议
- 网页内容保护：防止用户轻易复制网页内容
- 密码管理器：本地加密存储敏感信息
- 趣味游戏：创建解谜或寻宝游戏
- 隐私保护：在公共电脑上临时加密敏感信息
这些案例展示了从简单到复杂的HTML文字加密技术，开发者可以根据实际需求选择合适的方案或进行组合使用。
这一切，似未曾拥有