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

---

先展示效果

（因为主要是实现功能，所以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>
				
				<td><label for="user_input">请输入:label>td>
				<td><input type="text" name="user_input" id="user_input">td>
			tr>
			<tr>
				<td><label for="translation">转换后的明文:  label>td>
				<td><input type="text" name="translation" id="translation">td>
			tr>
			<tr>
				<td><label for="translation">转换后的密文:  label>td>
				<td><input type="text" name="translation" id="translation">td>
			tr>
		table>
		<div class="buts">
			
			
			<button type="button">translation_forwardbutton>    
			<button type="button">translation_backbutton>
			<button type="reset">resetbutton>       
		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() 获取所有的input和button元素，并在后面为其绑定事件。

定义全局变量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详解

---

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