html+css+js 做一个加解密小网页

最新推荐文章于 2023-04-24 22:12:11 发布
最新推荐文章于 2023-04-24 22:12:11 发布
阅读量642 收藏 3
点赞数
分类专栏： web 文章标签： css js html 加密解密 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46743327/article/details/106562561
版权

孩子第一次做网页，比较菜，勿喷

本来是想做一个ctf的知识站和加解密站当作业交上去，但是时间太短了，又要准备高数和大雾简直人都要没了，就只写了base64，凯撒,和栅栏密码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CTF小站</title>
    <link rel="stylesheet" href="div.css">
    <link rel="stylesheet" href="top.css">
    <link rel="stylesheet" href="other.css">
    <script src="base64.js"></script>
    <script src="crypto.js"></script>
    <script src="Caesar.js"></script>
    <script src="fence.js"></script>


</head>

<body>
    <div class="container">
        <div class="top">
            <center>
                <ul>
                    <li><a href="https://ctf-wiki.github.io/ctf-wiki/" target="_blank">CTFwiki</a></li>
                    <li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
                    <li><a href="https://www.ichunqiu.com/" target="_blank">i春秋</a></li>
                    <li><a href="http://www.hetianlab.com/" target="_blank">合天网安</a></li>
                    <li>
                        <a href="#">练习场</a>
                        <ul>
                            <li><a href="https://adworld.xctf.org.cn/" target="_blank">攻防世界</a></li>
                            <li><a href="https://ctf.bugku.com/" target="_blank">Bugku</a></li>
                            <li><a href="https://buuoj.cn" target="_blank">Buuctf</a></li>
                        </ul>
                    </li>
                </ul>
            </center>
        </div>
        <div class="left">

        </div>
        <div class="main">
            <p>——————加解密与编解码——————</p>
            <div class="input">
                <textarea name="input" id="input" placeholder="请输入需要加密或解密的字符串" autocomplete="off"></textarea>
            </div>
            <div class="buttons">
                选择加解密类型<select name="leixing" id="select1" onclick="keyinput()" autocomplete="off">
                    <option value="a" selected="selected">Base64</option>
                    <option value="b">Caesar</option>
                    <option value="c">Fence</option>

                </select>
                <input type="text" id="key" placeholder="key:" style=" visibility: hidden;" autocomplete="off">
                <button id="en" onclick="encode()">编码</button>
                <button id="de" onclick="decode()">解码</button>
                <button onclick="clearall()">清空</button>
            </div>
            <div class="output">
                <textarea name="output" id="output" cols="30" rows="1" placeholder="输出区域" autocomplete="off"></textarea>
            </div>
        </div>
        <div class="bottom">
            邮箱：<address>lijinnuo89@163.com</address>
            QQ：2275166029
        </div>

    </div>
</body>


</html>

css

div.main {
    padding-top: 60px;
    margin-top: 30px;
    width: 60%;
    height: 600px;
    float: left;

}

div.buttons {
    height: 100px;
}

div.input {
    height: 250px;
}

div.output {
    height: 150px;
}

div.container {
    width: 100%;
    height: 750px;
}

div.left {

    width: 20%;
    height: 600px;
    float: left;
}

div.bottom {
    width: 100%;
    height: 100px;
    float: left;
    background: lightseagreen;

}

textarea {
    border-radius: 3px;

}

#select1 {
    background: #fafdfe;
    height: 28px;
    width: 80px;
    line-height: 28px;
    border: 1px solid #9bc0dd;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;

}

textarea#input {
    font-size: 15px;
    width: 100%;
    height: 200px;
    border-radius: 0%;
    border: 1px solid lightseagreen;
}

textarea#output {
    border-radius: 0%;
    height: 20px;
    width: 100%;
    font-size: 15px;
    resize: none;
    cursor: pointer;
    border: 1px solid rebeccapurple;
    padding: 5px;
}

button {
    margin-top: 32px;
    margin-left: 30px;
    margin-right: 30px;
    height: 40px;
}

button {
    text-decoration: none;
    background-color: darkseagreen;
    color: white;
    padding: 10px 30px 10px 30px;
    font-size: 16px;
    font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    border-radius: 3px;

    -webkit-transition: all linear 0.30s;
    -moz-transition: all linear 0.30s;
    transition: all linear 0.30s;

}

button :hover {
    background: #385f9e;
}

.top {
    /* 设置宽度高度背景颜色 */
    height: auto;
    /*高度改为自动高度*/
    width: 100%;
    background: lightseagreen;
    position: fixed;
    /*固定在顶部*/
    top: 0;
    /*离顶部的距离为0*/
    border-bottom: 1px solid #000
}

.top ul {
    /* 清除ul标签的默认样式 */
    width: auto;
    /*宽度也改为自动*/
    list-style-type: none;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 5%;
    /* margin-top: 0;          */
    padding: 0;

}

.top li {
    float: left;
    /* 使li内容横向浮动，即横向排列  */
    margin-right: 2%;
    /* 两个li之间的距离*/
    position: relative;
    overflow: hidden;
}

.top li a {
    /* 设置链接内容显示的格式*/
    display: block;
    /* 把链接显示为块元素可使整个链接区域可点击 */
    color: white;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none;
    /* 去除下划线 */

}

.top li a:hover {
    /* 鼠标选中时变为绿色 */
    color: darkolivegreen;
}

.top ul li ul {
    /* 设置二级菜单 */
    margin-left: -0.2px;
    background-color: teal;
    position: relative;
    display: none;
    /* 默认隐藏二级菜单的内容 */

}

.top ul li ul li {
    /* 二级菜单li内容的显示 */

    float: none;
    text-align: center;
}

.top ul li:hover ul {
    /* 鼠标选中二级菜单内容时 */
    display: block;
}

js

function encode() { //  加密算法选择
    inputerror(); //输入检测
    keyerror();
    var index = document.getElementById("select1").selectedIndex;
    switch (index) {
        case 0:
            base64encode();
            break;
        case 1:
            Caesarencrypt();
            break;
        case 2:
            fence_encrypt();
            break;
    }
}

function decode() { //解密算法选择
    inputerror(); //输入检测
    var index = document.getElementById("select1").selectedIndex;
    switch (index) {
        case 0:
            base64decode();
            break;
        case 1:
            keyerror();
            Caesardecrypt();
            break;
        case 2:
            fence_decrypt();
    }
}

function keyinput() { //出现key值输入框以及加密加密
    let index = document.getElementById("select1").selectedIndex
    if (index == 1 || index == 2) {
        document.getElementById("key").style.visibility = "visible"
        document.getElementById("en").innerHTML = "加密";
        document.getElementById("de").innerHTML = "解密";
    } else {
        document.getElementById("key").style.visibility = "hidden"
        document.getElementById("en").innerHTML = "编码";
        document.getElementById("de").innerHTML = "解码";
    }
}

function clearall() { //清除输入输出
    document.getElementById("input").value = "";
    document.getElementById("output").value = "";
    document.getElementById("key").value = "";

}
//错误检测
function inputerror() {
    //恢复样式
    document.getElementById("input").style.border = "1px solid lightseagreen"
    document.getElementById("input").style.color = "black";
    var input = document.getElementById("input").value
    if (input.length == 0) {
        document.getElementById("output").innerHTML = "请输入数据！！！";
        document.getElementById("input").style.border = "2px solid red"
        document.getElementById("input").style.color = "red";
    }


}

function keyerror() //未输入key值检测
{
    document.getElementById("key").style.color = "black"
    document.getElementById("key").style.border = "1px solid lightseagreen"

    var key = document.getElementById("key").value;
    if (key.length == 0) {
        document.getElementById("key").style.color = "red";
        document.getElementById("key").style.border = "2px solid red";
    }
}




_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

function base64encode() {//base64编码
   

    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    var input=document.getElementById("input").value;
    input = _utf8_encode(input);
    while (i < input.length) {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output = output +
        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
    }
    document.getElementById("output").value=output;

}

function base64decode() {       //base64解码
    var input=document.getElementById("input").value
    var output = "";
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    while (i < input.length) {
        enc1 = _keyStr.indexOf(input.charAt(i++));
        enc2 = _keyStr.indexOf(input.charAt(i++));
        enc3 = _keyStr.indexOf(input.charAt(i++));
        enc4 = _keyStr.indexOf(input.charAt(i++));
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
        output = output + String.fromCharCode(chr1);
        if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
        }
    }
    output = _utf8_decode(output);
    document.getElementById("output").value=output;
}

function _utf8_encode(string) {
    string = string.replace(/\r\n/g,"\n");
    var utftext = "";
    for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
            utftext += String.fromCharCode(c);
        } else if((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
        } else {
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
        }

    }
    return utftext;
}

function _utf8_decode(utftext) {
    var string = "";
    var i = 0;
    var c = c1 = c2 = 0;
    while ( i < utftext.length ) {
        c = utftext.charCodeAt(i);
        if (c < 128) {
            string += String.fromCharCode(c);
            i++;
        } else if((c > 191) && (c < 224)) {
            c2 = utftext.charCodeAt(i+1);
            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
            i += 2;
        } else {
            c2 = utftext.charCodeAt(i+1);
            c3 = utftext.charCodeAt(i+2);
            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
        }
    }
    return string;
}



function Caesarencrypt() {//凯撒加密
    var key = document.getElementById("key").value;
    if (key.length == 0) //不符合规则
    {
        document.getElementById("output").value = "加密失败，请检查输入和key值"
    } else {
        var plain = document.getElementById("input").value;
        var ctext = "";
        for (var i = 0; i < plain.length; i++) {
            var pcode = plain.charCodeAt(i);
            var ccode = pcode;
            if (pcode >= 65 && pcode <= 90) {
                ccode = ((pcode - 65) + key * 1) % 26 + 65;
            }
            if (pcode >= 97 && pcode <= 122) {
                ccode = ((pcode - 97) + key * 1) % 26 + 97;
            }
            ctext += String.fromCharCode(ccode);
        }

        document.getElementById("output").value = ctext;
    }
}

function Caesardecrypt() { //凯撒解密
    var key = document.getElementById("key").value;
    if (key.length == 0) {
        document.getElementById("output").value = "解密失败，请检查输入和key值"
    } else {
        var ctext = document.getElementById("input").value;
        var plain = "";
        for (var i = 0; i < ctext.length; i++) {
            var ccode = ctext.charCodeAt(i);
            var pcode = ccode;
            if (ccode >= 65 && ccode <= 90) {
                pcode = ((ccode - 65) - key * 1 + 26) % 26 + 65;
            }
            if (ccode >= 97 && ccode <= 122) {
                pcode = ((ccode - 97) - key * 1 + 26) % 26 + 97;
            }
            plain += String.fromCharCode(pcode);
        }
        document.getElementById("output").value = plain;
    }

}



//栅栏密码加解密

function fence_encrypt() {
    var input = document.getElementById("input").value; //读取输入
    var key = document.getElementById("key").value; //读取一组几个字符
    var result = "";
    if (input.length % key !== 0) //不符合规则
    {
        document.getElementById("output").value = "加密失败，请检查输入和key值"
    } else {
        var num = input.length / key; //计算一共几组
        for (var i = 1; i <= key; i++) {
            for (var j = 1; j <= num; j++) {
                result += input[i - 1 + (j - 1) * key];
            }
        }
        document.getElementById("output").value = result;
    }
}

function fence_decrypt() {
    var input = document.getElementById("input").value; //读取输入
    var key = document.getElementById("key").value; //读取一组几个字符
    var result = "";
    if (input.length % key !== 0) //不符合规则
    {
        document.getElementById("output").value = "解密失败，请检查输入和key值"
    } else {
        var num = input.length / key; //计算一共几组
        for (var i = 1; i <= num; i++) {
            for (var j = 1; j <= key; j++) {
                result += input[i - 1 + (j - 1) * num];
            }
        }
        document.getElementById("output").value = result;
    }
}
_wand1
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
爬虫入门经典(二十一) | 破解CSS加密之爬取大众点评
不温卜火
11-18 8万+
  大家好，我是不温卜火，是一名计算机学院大数据专业大三的学生，昵称来源于成语—不温不火，本意是希望自己性情温和。作为一名互联网行业的小白，博主写博客一方面是为了记录自己的学习过程，另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://buwenbuhuo.blog.csdn.net/。 PS：由于现在越来越多的人未经本人同意直接爬取博主本人.
前端常用js加密方法
csz_12345的博客
05-19 504
这里罗列前端常用的js加密方法 base64加密 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>base64加密</title> <script type="text/javascript" src="base64.js"></script> <script type="text/javascript"> v
很好用的css+js加密工具
12-13
很好用的css+js加密工具 ，修好好源码中的需要加密的文件目录（会编译子文件夹）；请确保自己的css和js文件的编码格式为utf-8
实现网站CSS样式表加密
12-22
最近更新，本人自己编写的一个加密CSS样式表的程序,可以指定加密生成文件运行的有效范围，如：domain.com，那么文件只能在这个域名空间下才能正常运行，由于公司网站经常被人抄袭，CSS对自己很重要，所以加密CSS。本程序需要在PHP服务器下才能运行 新版在线加密 http://oxcms.net/soft/css-to-js
JavaScript / html / CSS 在线：美化、优化、加密、解密、压缩、解压
11-13
前端开发有时候复制别人的代码没有格式化，阅读起来很困难，自己格式化需要一点点的调，很浪费时间。本软件本地打开可以格式化、压缩、解压JavaScript/html/CSS代码，很方便，大大提高了开发效率。
SimpleBLEPeripheral_ibeacon.rar_加密解密_HTML_
08-11
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它可以与JavaScript和CSS结合，实现动态内容和美观的界面。 总的来说，这个项目可能是一个使用CC2541微控制器构建的自定义iBeacon设备，具有数据...
基于python+django的信息加密解密网站的实现.zip
06-09
在这个基于Python+Django的信息加密解密网站的实现项目中，开发者使用了现代Web开发的常见技术和工具，构建了一个能够处理敏感数据的安全平台。以下是该项目的关键知识点和详细说明： 1. **Python编程语言**：...
微信小游戏DES加解密DEMO
08-08
微信小游戏DES加解密DEMO是一个实用的示例项目，主要展示了如何在微信小游戏平台中进行数据的安全加密和解密操作。DES（Data Encryption Standard）是一种经典的对称加密算法，而`crypto-js`是一个JavaScript库，它...
云之道律师小程序解密版+小程序前端
08-09
例如，云之道律师小程序可能会有一个专门的“咨询组件”，用户可以填写问题并提交。 3. **数据绑定和状态管理**：在小程序前端中，数据绑定是连接视图和模型的关键，使得界面能实时反映数据变化。状态管理工具，如...
js、css压缩加密工具
05-07
js、css压缩加密工具，快速批量压缩js和css，混淆加密js
css与js加密法
04-16
实现网站CSS样式表加密,此工具为工具产品！加密会形成乱码！让人看不懂的意思！
实现CSS在线美化(格式化)、压缩、加密、解密、混淆工具-toolfk程序员工具网
weixin_34315485的博客
11-11 177
本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱，ToolFk 特色是专注于程序员日常的开发工具，不用安装任何软件，只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。ToolFk还支持 BarCode条形码在线生成、 QueryList采集器、 PHP代码在线运行、 PHP混淆、加密、解密、 Python代码在线运行、JavaScript在线运行、YAML格式化...
javaweb个人主页设计（html+css+js）
热门推荐
qq_63306482的博客
04-24 2万+
个人主页设计
python实现加密解密功能（GUI）
weixin_50975723的博客
11-03 1931
项目使用python和tkinter实现，能够实现对明文/密文的加解密，或对文本进行base64、url编码/解码。
js加密css加密base64加密翻译的思想和操作
h1751541643的博客
11-18 321
JS加密破解思路 破解js加密的的方法 1找到那些参数在影响数据的获取 需要做不同的请求，对比参数，找出不同的参数即可 2找到参数之后，需要查找这些参数是从哪里获得的、生成的原理是什么？ （1）找到参数可能是通过之前的一些请求传递过来的 （2）参数实在某个js文件生成的-->z找到对应的js文件，分析js代码，得到参数的生成原理 在无法自己翻译破解的前提下：进行破解 在无法翻译的情况下： （1）创建js 文件将js函数放入其中 (2) 下载模块 p
关于HTML、js加密、混淆、源码保护、代码安全，防止解压直接看源码
weixin_34216196的博客
05-01 1653
一直有人问HTML加密混淆怎么做，其实这在业内是早已很多人研究过的课题。假日期间整理一篇文章分享给大家。 我们先理下需求，加密的目的是什么？加密到什么级别？为此我们可以牺牲什么？我们知道这个世界不存在绝对的安全，加密会被破解、混淆会被反混淆。技术小白、开发者、黑客，是完全不同的级别，防范不同级别的人策略都不一样。防范力度越大，投入代价也越大，比如聘请专业的安全公司。除了投入，我们还需要考虑程序的执...
#1使用html+css+js制作网站教程 准备
Eritque arcus的博客
01-26 4412
#1使用html css js制作网站教程 准备阶段 介绍编辑软件，基本框架，基本概念
HTML+CSS+JS 初步实践搭建网页
yo跟着新宇走
01-13 2695
HTML+CSS+JS 初步实践搭建网页简介搭建过程HTML+CSS+JS绝对位置嵌入css加入新插件网易云音乐外链 简介 给媳妇制作一个生日惊喜网页。 原材料： 网页基础： https://github.com/hackerzhou/Love 照片插件： https://dishiduo.coding.net/public/hcj/hcj/git/files 地址：2020-11/2020-11-8/录制 搭建过程 将网页仓库下载下来，部署在nginx服务器中的 /var/www/html nginx会
js c# des加密解密
最新发布
10-18
JavaScript（简称JS）是一种常用的编程语言，通常用于在网页上实现交互效果。它是一种轻量级的、解释性的脚本语言，由文本和编译组成。JS可以与HTML和CSS配合使用，为网页添加动态效果。JS有许多功能，包括表单验证...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值