Base64加解密HTML自己编写的添加了pc端和手机端自适应，反复测试过没有任何问题现在分享给各位，渐变背景我已经在源码里标注自行效果。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Base64加解密</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(to right, #c7ffc7, #fff2cc, #c7ffff, #cfe2f3); /* 渐变背景颜色在此处效果使用rgb工具 */ } .card { width: 80%; max-width: 600px; background-color: white; border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.1); padding: 20px; transition: transform 0.3s; position: relative; } .card:hover { transform: translateY(-5px); } textarea { width: 100%; max-width: 100%; height: 150px; margin-bottom: 20px; padding: 10px; font-size: 1rem; border: 2px solid #ccc; border-radius: 4px; background-color: white; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; box-sizing: border-box; } textarea:hover, textarea:focus { transform: scale(1.02); box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-color: #44d431; } textarea:focus { outline: none; } .controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .btn32 { height: 70px; padding: 0 20px; cursor: pointer; border: 1px solid rgba(255,255,255,0.8); border-radius: 10px; background-color: #f2fff7; font-size: 14px; font-weight: 700; color: #44d431; box-shadow: 6px 6px 16px rgba(0,0,0,0.2), -6px -6px 16px rgba(255,255,255,0.8), inset 0px 0px 0px rgba(0,0,0,0.2), inset 0px 0px 0px rgba(255,255,255,0.8); transition: 0.2s; } .btn32:hover { color: #3034d4; background-color: #f2f3ff; border: 1px solid rgba(255,255,255,1); box-shadow: 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px rgba(255,255,255,0.8), inset 6px 6px 12px rgba(0,0,0,0.2), inset -6px -6px 12px rgba(255,255,255,0.8); transform: translateY(10px) scale(0.98); } @media(max-width:600px) { textarea { width: 95%; height: 200px; } button { font-size: 0.9rem; } .controls { flex-direction: column; } } </style> </head> <body> <h1>Base64加解密</h1> <div class="card"> <textarea id="inputText" placeholder="输入文本..."></textarea> <div class="controls"> <button class="btn32" onclick="encodeBase64()">编码</button> <button class="btn32" onclick="decodeBase64()">解码</button> <button class="btn32" onclick="swap()">↑交换</button> <button class="btn32" onclick="copyOutput()">复制结果</button> <button class="btn32" onclick="clearFields()">清空</button> </div> <h2>结果：</h2> <textarea id="outputText" readonly></textarea> </div> <script> function encodeBase64() { const inputText = document.getElementById("inputText").value; const encodedText = btoa(unescape(encodeURIComponent(inputText))); document.getElementById("outputText").value = encodedText; } function decodeBase64() { const inputText = document.getElementById("inputText").value; try { const decodedText = decodeURIComponent(escape(atob(inputText))); document.getElementById("outputText").value = decodedText; } catch (e) { document.getElementById("outputText").value = "解码失败，输入的编码可能不正确。"; } } function copyOutput() { const outputText = document.getElementById("outputText"); outputText.select(); outputText.setSelectionRange(0, 99999); document.execCommand("copy"); alert("结果已复制到剪贴板！"); } function swap() { const inputText = document.getElementById("inputText"); const outputText = document.getElementById("outputText"); const temp = inputText.value; inputText.value = outputText.value; outputText.value = temp; } function clearFields() { document.getElementById("inputText").value = ""; document.getElementById("outputText").value = ""; } </script> </body> </html>
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
如若转载，请注明出处：https://www.zxperson.com/167.html
在线Base64加解密HTML源码
12-24
劳法计算器，全国劳动法数据快速精确计算应用
12-23
批量解析快手个人主页所有视频下载工具
12-20
免费国外视频搬运工具，卡卡字幕助手VideoCaptioner_1.0无需GPU
12-19
PHP本地Ping网站图片版api接口源码
12-16
免费在线PHP客服管理系统源码
12-14
WordPress子比主题冬季圣诞节设计风格美化插件，冬日奇境
12-12
基于Web的塔罗牌占卜项目源码
12-10
人人影视二十年数据及程序开源分享（附百度网盘下载）
12-09
安卓微商管家_1.0.22 朋友圈营销、清粉批量+好友、解锁会员
12-06
AI换脸GIF表情包生成器AIGIF
12-18
TaTa一款图片/视频修复神器，模糊图片变4K
12-17
华硕笔记本轻量级控制中心G-Helper
12-13
微信朋友圈导出工具 Wemo V1.1.0
12-11
AI抠图软件Aiarty Image Matting 2.0 正版注册码
12-05
发票排版助手 - 财务报销人员必备工具
12-03
空壳 • Konker - 应用分身多开
11-30
ChromeAutoBot - 自动化操作 Chrome
11-27
小薯条 – 小红书 AI 涨粉神器
11-26
免费在线压缩网站 支持图像、视频、音频、文档、代码文件等压缩
11-25
09日04日，星期三，在这里每天60秒读懂世界！
09-04
08日28日，星期三，在这里每天60秒读懂世界！
08-28
07日19日，星期五，在这里每天60秒读懂世界！
07-19
07日18日，星期四，在这里每天60秒读懂世界！
07-19
07日17日，星期三，在这里每天60秒读懂世界！
07-17
07日16日，星期二，在这里每天60秒读懂世界！
07-16
07日15日，星期一，在这里每天60秒读懂世界！
07-15
07日14日，星期日，在这里每天60秒读懂世界！
07-15
07日13日，星期六，在这里每天60秒读懂世界！
07-13
07日12日，星期五，在这里每天60秒读懂世界！
07-12
