html+css+js 做一个加解密小网页
2024-04-24 21:42:04
孩子第一次做网页，比较菜，勿喷
本来是想做一个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").selectedIndexif (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").valueif (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").valuevar 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;}
}
html+css+js 做一个加解密小网页相关推荐
- 用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧 效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...
- HTML+CSS+JS做一个好看的个人网页—web网页设计作业
个人网页设计 个人网页(html+css+js)--网页设计作业 带背景音乐(The way I still Love you).樱花飘落效果.粒子飘落效果 页面美观,样式精美 涉及(html+css ...
- 用HTML+CSS+JS做一个漂亮的个人网页
个人网页设计 个人网页(html+css+js)--带背景音乐.樱花飘落效果 页面美观,样式丰富 可以根据自己需求进行修改 源码在这里获取https://download.csdn.net/downl ...
- Node.js 做一个抢票小工具！
今天带领大家一起用Node.js 实现抢票小工具&短信通知提醒 作者:西岚 https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxvLZg 获取接口信息 查 ...
- HTML + CSS + JS做一个绘画分享网站[开源项目]
声明:1.此项目仅仅代码开源,DrawPark是此博客的产权,严禁盗用 2.此项目暂时是静态网站 先看一下效果图吧!预览网址:https://drawpark.rth.app/ HTML代码 < ...
- 用HTML+CSS+JS做一个漂亮简单的公司网站（JavaScript期末大作业）
- 用HTML+CSS+JS做一个漂亮简单的游戏网页——全屏游戏美术大赛作品(4个滚动页面)
- 用 typescript 做一个贪吃蛇小游戏
typescript 做一个贪吃蛇小游戏 搭建环境 创建 tscofig.json 文件 配置如下 {"compilerOptions": {"target": ...
- 用three.js做一个新闻联播开头动画（一）
一个好习惯,先给结论 最终效果如下: 在线体验地址:点我预览 代码地址:点我github 本文首发于:https://blog.gis1024.com/three_news_op_1.html 这里才 ...
最新文章
- 加入新e时代建站网后，我可以做什么
- C#自动弹出窗口并定时自动关闭
- 添加轨迹运动_时间最优轨迹（资料）
- 【转载】利用scipy.misc等库对jpg以及png等图像数据预处理（用于深度学习喂数据）...
- HTH的完整形式是什么？
- web前端vue问题小结及相关面试题总结
- 大数据应用项目创新大赛_第二届海南大数据创新应用大赛收官
- kettle升级jetty10实验(未完成jaas认证)
- 解决UnicodeEncodeError: 'gbk' codec can't encode character '\xe4' in position 319等问题
- 垃圾回收相关算法总结
- 网红框架FastAPI能否补足python饱受诟病的速度
- 【Day2.1】时差为看日出创造了条件
- 《炬丰科技-半导体工艺》激光增强湿法蚀刻制造的大规模高质量玻璃微透镜阵列
- 最害怕的是，不知道想要什么
- 做到这十点中的三点你就是成功人士
- 使用markdownpad生成目录
- 解决document.form.submit()对象不支持此属性或方法
- java 图像锐化_Java实现图像的模糊与锐化实例
- iphone导出视频出错（连接到系统上的设备没有发挥作用）
- 宝捷信注塑机PS系列采集方案