在线Base64加解密HTML源码

2024-12-24 09:09 • 程序源码 • 阅读 665

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

追风少年

665 0

劳法计算器，全国劳动法数据快速精确计算应用

上一篇 2024-12-23 09:10

XHS Note Generator - 视频转换小红书笔记

下一篇 2024-12-25 09:24

大气企业官网单页源码非常好看，免费下载

2025-04-23 09:53 154 0
B 站「硬核会员」DeepSeek 自动答题神器，Bili-Hardcore

2025-04-15 10:07 325 0
全新轻量级PHP简约活码管理系统

2025-04-07 09:08 418 0
OhMyWeChat - 微信聊天记录备份导出工具 | 数据分析可视化报告

2025-03-28 09:07 518 0
微信域名防红，打开自动跳转浏览器

2025-03-25 09:23 545 0
微信单向好友检测WechatRealFriends V1.0.1

2025-03-21 09:04 593 0

尚未登录无法发表查看留言点击登录

HI ! 请登录

立即登录

免费壁纸小程序

程序源码

大气企业官网单页源码非常好看，免费下载

04-23

B 站「硬核会员」DeepSeek 自动答题神器，Bili-Hardcore

04-15

全新轻量级PHP简约活码管理系统

04-07

OhMyWeChat - 微信聊天记录备份导出工具 | 数据分析可视化报告

03-28

微信域名防红，打开自动跳转浏览器

03-25

微信单向好友检测WechatRealFriends V1.0.1

03-21

利用JS代码实现HTML网页飘落樱花特效（附代码）

03-19

PHP实现在线聊天系统源码

03-14

新版UI视频裂变加群推广分享引流源码

03-04

Adobe系列软件通用解锁补丁AdobeGenp

03-03

实用软件

Student App Centre：学生专属软件福利全球200+正版应用教育优惠合集

04-25

Watt Toolkit (原steam++) 免费多平台游戏加速器

04-19

windows电脑更新暂停器支持自定义时间

04-17

LocalFileEncrypt - 文件加密解密工具

04-16

将图片转ICO在线工具，图片在线转ICO

04-14

Same newUI克隆神器一键复刻网页代码

04-12

火绒小工具提取版V6.0.5.5，文件粉碎，启动项，垃圾清理，右键管理

04-09

BiliTools-哔哩哔哩工具箱

04-08

基于OpenCV的防窥助手 V1.1

04-02

奇客在线免费PDF转Word工具

03-31

值得一看

地狱笑话合集第一期

04-27

给网站套上Cloudflare（以腾讯云为例）

04-27

2025年最新最全Windows 10永久激活码/激活秘钥/序列号汇总

04-21

发疯文案：微信拍一拍设置有趣文字、图案

02-18

哪吒2表情包|哪吒2壁纸

02-11

发疯文案：疯狂星期四发疯文案

01-02

网页版红色警戒

12-19

图一乐：现代版女娲补天

11-14

不老追风少年的日常

11-13

WordPress 标签云函数 wp_tag_cloud() 使用方法详解

10-17

每天60s读懂世界

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