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
2026最新指南：安全有效的Windows激活工具推荐与使用教程(内含最新激活工具)
05-08
绿色免费离线小说写作神器V2.0：零登录零收费，Win10亲测无毒，一键导出+智能查找替换
09-25
PC 微信防撤回插件 适用4.1.0.34
09-10
跑步模拟神器 v1.0 | 自定义体育场、配速、 跑步距离，从此解放双腿！
08-22
音乐多格式互转工具 - 一键转换NCM/FLAC/WAV/WMA/APE/OGG/MP3
08-07
「APK.1安装器」一键安装QQ/微信改名的APK文件｜免改名｜无存储权限｜4MB轻量工具
07-31
ttpkgUnpacker 抖音小程序逆向解包工具
07-30
「Favicon.ico在线制作工具」免费生成网站图标，PHP源码支持，提升SEO与品牌形象！
07-09
让经典焕发新生！《红色警戒3：起义时刻》官方级简体中文汉化包震撼发布
07-08
AI验证码自动识别工具：告别繁琐验证，一键智能填充
07-07
网站流量主看过来！亲测广告联盟 CPM 超高，申请秒过不卡内容
06-05
Passper_v3.6.0.1 压缩包解锁软件：高效破解 RAR/ZIP 密码，安全快速找回文件
05-09
AI写的AI写小说软件
05-06
自定义水印添加工具
03-25
磁盘清理工具 Glary Disk Cleaner v6.0.1.43
03-25
图像无损压缩工具：pinga 0.63中文版
11-23
PDFQFZ(PDF加盖骑缝章) v1.31
09-24
Wise Care 365(电脑数据擦除)
09-20
Wallpaper Engine(动态桌面壁纸软件) v2.7.3 中文直装版
09-15
搞机工具箱软件下载_一键Root刷机救砖神器|最新绿色版免费安装
09-12
自媒体代运营 只需授权号就不用管 收益四六分红
06-06
抖音代发作品边涨粉边赚米（种草类素材）一单30-200不收费，日结，有保底。
06-05
解锁小红书流量密码：爆文选题+内容优化+互动涨粉全攻略 (稀缺教程)
08-08
UNI-APP_跳转各大平台应用商店
05-14
地狱笑话合集第一期
04-27
给网站套上Cloudflare（以腾讯云为例）
04-27
2025年最新最全Windows 10永久激活码/激活秘钥/序列号汇总（9月8号更新）
04-21
发疯文案：微信拍一拍设置有趣文字、图案
02-18
哪吒2表情包|哪吒2壁纸
02-11
发疯文案：疯狂星期四发疯文案
01-02
简单操作，每天50美元收入，搬运就是赚钱的秘诀【揭秘】
06-13
2026外贸全域实战落地课，零基础外贸入门，打通全域获客、谈单、物流、退税全流程，新手也能快速出单
06-11
小红书卖电影风格提示词，客单价29，50多天卖了790单，小白直接抄作业！
06-08
京东数据采集，免费教程，不封号，一天可赚一杯奶茶
06-05
OpenClaw从零到全能AI机器人：部署、开发、Skill组装、微信接入、商业自动化全实战
06-02
爆款AI漫剧《斩仙台下我震惊了诸神》深度解析课，逐段拆解仙侠漫剧镜头与制作思路，快速复刻爆款创作模式
05-29
游戏全自动搬砖，日入1000+，长久稳定无脑赚，可副业全职！
05-28
抖音卡特效搬运技术，图文、动图、视频通用，全手机适配
05-26
可复制冷邮件玩法：月投50刀賺1W+，新增6000+销售额，3个工具零门槛上手
05-25
高产值公众号流量主项目陪跑营，发文章-起播放量-收益直接产生，一篇爆文收益1k+
05-22
