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
多种方式实现html瀑布流布局(flex,column-count,grid布局,float布局)
05-30
MediaGo：跨平台视频提取下载的开源神器
05-29
NTQQ跳转加好友接口,NTQQ跳转加好友代码
05-26
微信防撤回多开：BetterWx-UI v2.0.7
05-12
抖音，快手，皮皮虾，汽水音乐解析API接口源码
05-06
生活类在线工具箱源码 包含200个工具
05-06
大气企业官网单页源码非常好看，免费下载
04-23
B 站「硬核会员」DeepSeek 自动答题神器，Bili-Hardcore
04-15
全新轻量级PHP简约活码管理系统
04-07
OhMyWeChat - 微信聊天记录备份导出工具 | 数据分析可视化报告
03-28
自动抽奖系统：提升活动效率与用户体验的智能利器
06-16
苦瓜书盘(kgbook)入口：免费下载海量6寸PDF/MOBI电子书的宝藏网站
06-12
Fluent M3U8 - 免费 m3u8 视频下载工具
06-11
PhotoScissors(AI智能抠图工具) v9.3.1 绿色汉化版
06-10
电脑微信数据深度清理神器 Clean WeChat X 4.0 绿色便携版
06-09
LazPaint：轻量级但功能强大的免费图片编辑器 | 完美替代Windows画图
06-06
Snipaste 2.10.5 解锁版 截图工具
06-05
永久珍藏朋友圈回忆！Wemo开源工具：一键导出微信朋友圈数据
06-04
《鬼谷八荒》修改器多功能小幸版V2.5.5
06-03
自写小说写作软件：绿色、免费、不联网的创作利器
05-27
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
