首页 前端知识 随手写系列——写一个凯撒密码转换页面

随手写系列——写一个凯撒密码转换页面

2024-02-01 12:02:21 前端知识 前端哥 420 176 我要收藏

文章目录

  • 先展示效果
  • H5编写
  • C3编写
  • JS编写——方法一:过程版
  • JS编写——方法二:对象版
  • 代码获取


先展示效果

(因为主要是实现功能,所以CSS写的很粗糙)
请添加图片描述


H5编写

基础结构如下:
在这里插入图片描述

先构成最外面的大盒子.box,然后.inner>p装入注意事项,接着包含一个form,里面是一个table(存放输入框)+.buts(存放按钮)。

<div class="box">
	<div class="inner">
		<p>
			<h3>注意事项:</h3>
				1、在输入框中输入一串字符串<br />
				2、点击按钮translation_forward将其转换为凯撒密码的明文<br />
				3、点击按钮translation_back将其转换为凯撒密码的密文<br />
		</p>    
	</div>
	<form action="">
		<table>
			<tr>
				<!-- 通过label 标签增大用户点击到输入框的面积 -->
				<td><label for="user_input">请输入:</label></td>
				<td><input type="text" name="user_input" id="user_input"></td>
			</tr>
			<tr>
				<td><label for="translation">转换后的明文:&nbsp;&nbsp;</label></td>
				<td><input type="text" name="translation" id="translation"></td>
			</tr>
			<tr>
				<td><label for="translation">转换后的密文:&nbsp;&nbsp;</label></td>
				<td><input type="text" name="translation" id="translation"></td>
			</tr>
		</table>
		<div class="buts">
			<!-- 此处要注意必须将按钮的type值修改为button,否则默认为submit,会提交,这样点击按钮后页面会刷新 -->
			<!-- 所以结果出现的时间很短暂,无法满足效果 -->
			<button type="button">translation_forward</button>    
			<button type="button">translation_back</button>
			<button type="reset">reset</button>       
		</div>
	</form>    
</div>

C3编写

样式表没啥说的,写的挺冗余的,希望有好兄嘚改进后能发我瞻仰瞻仰。

/* 全局设定,清除浏览器默认样式值 */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* 将大盒子放在一个页面居中的位置 */
.box {
    /* position: relative; */
    /* left: 50%; */
    /* margin-left: -200px; */
    margin: 200px auto 0;
    width: 500px;
    height: 400px;
    border: 2px solid blue;
    background-color: rgba(255, 1, 200, .3);  
}

/* 注意事项 */
.inner {
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
    font-size: 18px;
    font-family: "楷体";
    line-height: 2em;
    /* 2em:因为此处是汉字,汉字是方块字,宽和高的长度相等,所以间距就是两个汉字的高度 */
}

input,
button {
    margin: 0 auto 5px;
    border: 1px solid red;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    border-radius: 6px;
}

/* 此处的100%是继承的 第二个 td的宽 */
input {
    width: 100%;
}

button {
    width: 130px;
    margin: 0 5px 0 5px;
    font-family: "Times New Roman";
}

/* input 宽继承此处 */
tr td:last-child{
    width: 300px;
    margin: 0 0 0 10px;
}

.buts{
    margin: 25px auto 0 30px;
}

JS编写——方法一:过程版

首先,我们通过querySelectAll() 获取所有的inputbutton元素,并在后面为其绑定事件。

定义全局变量user_input记录用户输入,plaintext记录通过按钮translation_forward求得的明文,cryptograph记录通过按钮translation_back求得的密文。

alphabet_xxx 记录的是大小写字母表,用于后面为每一个大/小写字母进行转换。(我知道很繁琐,但你先别繁琐,隔离+阳 一个月多了,能记起这点儿已经不错了~(doge)~~ )

// 获取元素
var text = document.querySelectorAll('input');
var submit = document.querySelectorAll('button');
var user_input = "";     //用户输入的内容
var plaintext = "";   // 明文
var cryptograph = "";   // 密文
var alphabet_lower = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
var alphabet_upper = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

接着是绑定事件,先为用户输入框绑定一个“失去焦点”事件,每当用户点击输入框之外区域失去输入框焦点后,将输入框中的内容存入user_input中。

// 绑定事件
text[0].addEventListener('blur', function(){
    user_input = text[0].value;
    //console.log(user_input);
});

接着为第一个按钮translation_forward绑定事件,当发生“onclick”事件后,进行运算并输出转换后的明文。

循环遍历每一个字母,先判断是大写还是小写字母,并赋值相应的字母表,接着确定转换后的字母在字母表中的下标,并将其添加到明文plaintext中,最后结束循环并将结果输出到结果框中。

// 后面第三个字符代替(只需要获取到输入的字符串对应位置字母的ASCLL码,进行加减三操作即可)
submit[0].addEventListener('click', function(){
    plaintext = "";   //初始化
    for(var i = 0; i < user_input.length; i++){
        var alphabet = (65 <= user_input.charCodeAt(i) && user_input.charCodeAt(i) <= 90 )? alphabet_upper : alphabet_lower;
        var j = alphabet.indexOf(user_input[i]);
        //console.log(j);
        //j = ((j + 1 + 26 - 3) % 26) - 1;
        //j = j > 0? j : (j + 26) % 25;   // 去除j-1=-1的情况  error
        j = j - 3 > 0? j - 3 : (j - 3 + 26) % 26;
        //console.log(j);
        plaintext += alphabet[j];
    };
    //console.log(plaintext);
    text[1].value = plaintext;
});

同理,为第二个按钮绑定点击事件,只是其中确定下标的判断条件有些许区别,其余的内容均相同,最后输出cryptograph到第二个结果框中。

submit[1].addEventListener('click', function(){
    cryptograph = "";    //初始化
    for(var i = 0; i < user_input.length; i++){
        var alphabet = (65 <= user_input.charCodeAt(i) && user_input.charCodeAt(i) <= 90 )? alphabet_upper : alphabet_lower;
        var j = alphabet.indexOf(user_input[i]);
        j = (j + 3) % 26;
        cryptograph += alphabet[j];
    }
    //console.log(cryptograph);
    text[2].value = cryptograph;
})

JS编写——方法二:对象版

暂时有点errors,等重新学学再说。希望找到工作的我可以回来补全这篇文章。


代码获取

GitHub地址:https://github.com/chenfeng-hx/FiiNote


参考文章
CSS特效(二):利用html和css制作毛玻璃特效和按钮动画效果
html设置盒子水平垂直居中,盒子水平垂直居中10种方法
text-indent:2em详解


写在最后:
首先,如果本篇文章有任何错误,烦请读者告知!不胜感激!
其次,本篇文章仅用于日常学习以及学业复习,如需转载等操作请告知作者(我)一声!
最后,本文会持续修改和更新,如果对本分栏的其他知识也感兴趣,可以移步目录导航专栏,查看本分栏的目录结构,也更方便对于知识的系统总结!
兄弟姐妹们,点个赞呗!
感谢!笔芯!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/995.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!